/* Illustrated neighborhood cards. Only this screen changes; artwork keeps its ratio. */
.map-screen{background:#091319;color:#f7f2dc}
.map-screen>.scene-plate{opacity:.2;filter:saturate(.7);object-fit:cover}
.map-screen:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(#091319 0 13%,transparent 36%,#091319 99%);z-index:0}
.map-header{position:absolute;inset:0 0 auto;z-index:2;padding:10px 20px 14px;background:linear-gradient(#091319 82%,#09131900)}
.map-header-top{display:flex;align-items:center;gap:8px;height:79px}
.map-screen .map-back{position:relative;top:auto;left:auto;flex:0 0 48px;width:max(48px,var(--touch-logical,44px));height:max(48px,var(--touch-logical,44px));background:none;padding:0}
.map-header-title{position:relative;flex:1;min-width:0}
.map-title-art{height:77px;width:224px;max-width:100%;background:url('./assets/optimized-v18/ui-v2/map-plate.webp') -12px -1px/260px auto no-repeat}
.map-header-edition{margin-left:auto;align-self:flex-start;margin-top:5px;border:1px solid #f0f0b55c;padding:5px 7px;color:#eaff58;font:900 10px/1.3 Arial,sans-serif;transform:rotate(6deg);box-shadow:2px 2px #020607}
.map-summary{display:flex;align-items:center;justify-content:space-between;margin-top:6px;gap:8px}
.map-screen .map-count{position:static;inset:auto;width:auto;height:auto;min-width:0;padding:0;background:none;display:block;color:#f7f2dc;font-size:13px;line-height:19px;font-weight:800;white-space:nowrap}
.map-stars{color:#eaff58;font-size:12px;font-weight:900;white-space:nowrap}
.map-progress{height:4px;margin-top:9px;background:#b8d6ce24;overflow:hidden;border-radius:2px}
.map-progress i{display:block;height:100%;background:linear-gradient(90deg,#40d9c5,#eaff58);box-shadow:0 0 7px #44d8c588}
.map-subtitle{margin:9px 0 0;color:#8faea9;font-size:10px;letter-spacing:1px;line-height:16px}
.map-viewport{position:absolute;z-index:1;top:178px;bottom:201px;left:0;right:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#619087 #0000;padding:4px 20px 18px;mask-image:linear-gradient(#000 0 96%,transparent)}
.map-screen #level-list{position:static;inset:auto;width:100%;height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 12px;padding:0;margin:0}
.map-card{position:relative;display:block;width:100%;height:151px;min-height:max(70px,var(--touch-logical,44px));padding:0;overflow:hidden;text-align:left;background:#10252a;border:1px solid #d1eddb55;border-radius:3px;box-shadow:3px 4px 0 #03090c;isolation:isolate;transition:border-color .14s,box-shadow .14s}
.map-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;filter:saturate(1.15) brightness(1.02);transition:filter .14s,transform .2s}
.map-card:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,#00131b05 0%,#03101600 24%,#051116a6 54%,#041017f5 100%)}
.map-card:after{content:"";position:absolute;inset:4px;z-index:3;border:1px solid #eaff5800;pointer-events:none}
.map-card-number{position:absolute;z-index:2;left:10px;top:4px;color:#f8f4d9;font:1000 italic 38px/1.1 Impact,"Arial Black",sans-serif;text-shadow:2px 3px #00131b,0 0 8px #0009;letter-spacing:-2px}
.map-card-state{position:absolute;z-index:2;top:11px;right:7px;font-size:9px;line-height:17px;padding:0 5px;background:#06191bdd;border:1px solid #74cbb887;border-radius:2px;color:#b6e7d8;font-weight:900;white-space:nowrap}
.map-card-copy{position:absolute;z-index:2;left:11px;right:9px;bottom:10px;display:flex;flex-direction:column;gap:3px}
.map-card-landmark{color:#a1c4bc;font-size:9px;font-weight:700;letter-spacing:1px;line-height:12px}
.map-card-copy strong{color:#fff8dd;font-size:20px;line-height:25px;font-weight:1000;letter-spacing:.5px;white-space:nowrap;text-shadow:1px 2px #000}
.map-card-record{color:#c0d4c7;font-size:10px;line-height:14px;white-space:nowrap}
.map-card.starred .map-card-state{background:#f0ff6995;color:#07150c;border-color:#f2ff8b}
.map-card.selected{border-color:#edff64;box-shadow:0 0 0 2px #edff64,4px 5px 0 #03090c}
.map-card.selected:after{border-color:#edff6466}
.map-card.selected>img{filter:saturate(1.15) brightness(1.04)}
.map-card.selected .map-card-copy strong{color:#f0ff7a}
.map-card.selected .map-card-number{color:#edff64}
.map-card.locked>img{filter:grayscale(.65) brightness(.67)}
.map-card.locked .map-card-number,.map-card.locked .map-card-copy strong{color:#b3c2b8}
.map-card.locked .map-card-state{color:#bac8c1;background:#0a161ded;border-color:#6d817b}
.map-card:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.map-footer{position:absolute;z-index:3;left:0;right:0;bottom:0;height:201px;padding:13px 20px 17px;background:#0a171df5;border-top:1px solid #5e86784d;box-shadow:0 -10px 22px #041016b3}
.map-selection-heading{display:flex;align-items:baseline;gap:9px;min-height:29px}
.map-selected-number{color:#eaff64;font:1000 italic 25px/1 Arial,sans-serif;letter-spacing:-1px}
.map-selection-heading h3{font-size:21px;font-weight:1000;line-height:29px;margin:0;white-space:nowrap}
.map-selected-record{margin-left:auto;font-size:9px;line-height:14px;color:#9fc5b9;max-width:143px;text-align:right}
.map-selected-tag{font-size:11px;line-height:17px;color:#c1d3c8;margin:4px 0 8px}
.map-facts{display:flex;gap:5px;flex-wrap:nowrap}
.map-facts>span{padding:3px 7px;background:#638f7e17;border:1px solid #659c864a;color:#b9d1c4;font-size:10px;line-height:14px;white-space:nowrap;border-radius:2px}
.map-play{display:block;position:relative;isolation:isolate;width:100%;height:53px;min-height:var(--touch-logical,44px);margin-top:12px;padding:0 16px;color:#122014;background:#e9ff64;border:2px solid #e9ff64;border-radius:2px;font-size:22px;line-height:1;font-weight:1000;font-style:italic;letter-spacing:2px;box-shadow:3px 3px 0 #f6f3d53d}
.map-play:before{content:"";position:absolute;inset:3px;border:1px solid #27412645;pointer-events:none;z-index:-1}
.map-play:disabled{opacity:1;color:#849990;background:#1b302f;border-color:#4d6b60;box-shadow:3px 3px 0 #030b0c;cursor:not-allowed}