/* Full-screen views: detail page, window view, compare, location, gallery, modal. */

.screen { position: fixed; inset: 0; z-index: 20; animation: fade-in var(--med) var(--ease); }
.screen.closing { animation: fade-out var(--fast) var(--ease) forwards; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
.screen.light { background: var(--page); }
.screen.dark { background: rgba(14, 18, 32, .94); }

/* --------------------------------------------------------------- detail page */
#detail { z-index: 30; }
.dt-left { position: absolute; left: 4.2rem; top: 9.6rem; width: 28rem; }
.dt-level { font-size: 1.6rem; font-weight: 300; color: #5b6273; line-height: 1.5; }
.dt-level b { display: block; font-weight: 400; color: var(--text); }
.dt-key { margin-top: 2rem; width: 28rem; background: #fff; padding: 1.4rem; border-radius: .2rem; }
.dt-key svg { width: 100%; height: auto; display: block; }
.dt-key .unit { transition: fill var(--med); }
.dt-key .unit.sel { fill: #e0218a !important; }
.dt-key-cap { font-size: 1rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--caption); margin: 1.2rem 0 0; }
.dt-towers { margin-top: 2.4rem; display: flex; gap: 1.2rem; align-items: flex-end; height: 16rem; }
.dt-towers .tw { position: relative; width: 3.6rem; display: flex; flex-direction: column-reverse; gap: .1rem; }
.dt-towers .tw i { display: block; height: .32rem; background: #cfd4dd; }
.dt-towers .tw i.sel { background: #e0218a; }
.dt-towers .tw span { position: absolute; bottom: -2.2rem; left: 0; right: 0; text-align: center; font-size: 1rem; font-weight: 600; color: var(--caption); letter-spacing: .1em; }
.dt-center {
  position: absolute; left: 35rem; right: 50rem; top: 7.2rem; bottom: 9.6rem; background: #fff; border-radius: .2rem;
  display: grid; place-items: center; overflow: hidden; touch-action: none;
}
.dt-center .plan-wrap { width: 100%; height: 100%; display: grid; place-items: center; padding: 3rem; transform-origin: 50% 50%; }
.dt-center .plan-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; }
.dt-center .send-view { display: flex; flex-direction: column; align-items: center; gap: 2rem; text-align: center; padding: 4rem; max-width: 60rem; }
.dt-center .send-view canvas { width: 30rem; height: 30rem; image-rendering: pixelated; }
.dt-center .send-view h3 { margin: 0; font-size: 2rem; font-weight: 300; letter-spacing: .14em; text-transform: uppercase; }
.dt-center .send-view p { margin: 0; font-size: 1.35rem; color: #4c5366; line-height: 1.6; }
.dt-center .send-view pre { margin: 0; font: inherit; font-size: 1.15rem; color: var(--caption); white-space: pre-wrap; text-align: left; background: var(--page); padding: 1.2rem 1.6rem; border-radius: .2rem; }
.dt-right {
  position: absolute; right: 4.2rem; top: 7.2rem; bottom: 9.6rem; width: 41rem; background: #fff; border-radius: .2rem;
  padding: 4.2rem 3.6rem 3rem; display: flex; flex-direction: column;
}
.dt-btns { position: absolute; left: -1.8rem; top: 2.4rem; display: flex; flex-direction: column; gap: 1rem; }
.dt-title { font-size: 2.4rem; font-weight: 300; letter-spacing: .1em; text-transform: uppercase; text-align: center; margin: 0 0 2.6rem; }
.dt-box { display: grid; grid-template-columns: 1fr 1fr; border: .1rem solid #c9ced8; height: 5.6rem; }
.dt-box > * { display: grid; place-items: center; }
.dt-box .area { display: flex; align-items: center; justify-content: center; font-size: 2.2rem; font-weight: 300; border-right: .1rem solid #c9ced8; }
.dt-box .area sup { align-self: flex-start; margin-top: 1.3rem; margin-left: .1rem; }
.dt-box button { font-size: 1rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #5b6273; }
.dt-box button.price { font-size: 1.7rem; font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--text); }
.dt-right .stats3 { margin: 2.2rem 0 1.6rem; }
.dt-info { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 2rem; font-size: 1.15rem; padding: 1.4rem 0; border-top: .1rem solid #e6e9ee; border-bottom: .1rem solid #e6e9ee; }
.dt-info div { display: flex; justify-content: space-between; gap: 1rem; }
.dt-info span { color: var(--caption); }
.dt-info b { font-weight: 500; text-align: right; }
.dt-actions { margin-top: auto; display: flex; flex-direction: column; gap: .9rem; }
.dt-actions .btn-navy { height: 4rem; }
.dt-actions .btn-navy.primary { height: 4.8rem; margin-bottom: 2.4rem; font-size: 1.2rem; }

/* --------------------------------------------------------------- window view */
#window { z-index: 30; background: transparent; }
/* the window view shows the live 3D stage: hide what sat under the (formerly opaque) page */
body.page-window #filter, body.page-window #card, body.page-window #tabs, body.page-window #stage-layer,
body.page-window #hl-list, body.page-window #hl-card, body.page-window #view-nav, body.page-window #wordmark { visibility: hidden; }
#pano { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#pano:active { cursor: grabbing; }
.win-tabs { position: absolute; left: 3.2rem; bottom: 2.4rem; display: flex; gap: .6rem; }
.win-tabs button {
  display: flex; align-items: center; justify-content: center; gap: 1.2rem; min-width: 19rem; height: 3.8rem; padding: 0 2rem;
  background: rgba(255, 255, 255, .84); color: #3a4054; font-size: 1.25rem; font-weight: 500; border-radius: .1rem;
  transition: background var(--fast), color var(--fast);
}
.win-tabs button.on { background: var(--navy); color: #fff; }
.win-tabs button.back { min-width: 25rem; justify-content: space-between; }
.win-tabs .ico { width: 1.6rem; height: 1.6rem; stroke-width: 2; }
.win-hint { position: absolute; left: 50%; top: 66%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 1.4rem; pointer-events: none; transition: opacity 600ms; }
.win-hint.hide { opacity: 0; }
.hint-circle { position: relative; width: 9.6rem; height: 9.6rem; border-radius: 50%; background: rgba(255, 255, 255, .55); border: .2rem solid rgba(255, 255, 255, .9); display: grid; place-items: center; color: #fff; box-shadow: 0 0 3rem rgba(255, 255, 255, .5); }
.hint-circle::after { content: ''; position: absolute; inset: -.2rem; border-radius: 50%; border: .2rem solid #fff; animation: pulse 1.8s infinite var(--ease); }
.hint-circle .ico { width: 4.4rem; height: 4.4rem; color: #fff; animation: sway 1.8s infinite ease-in-out; }
@keyframes sway { 0%, 100% { transform: translateX(-.8rem); } 50% { transform: translateX(.8rem); } }
.hint-text { color: #fff; font-size: 1.3rem; font-weight: 500; letter-spacing: .1em; text-shadow: 0 .1rem .6rem rgba(0, 0, 0, .5); }
.similar { position: absolute; right: 3.2rem; top: 50%; transform: translateY(-46%); width: 30rem; display: flex; flex-direction: column; gap: 1.2rem; }
.similar .s-head { display: flex; align-items: center; justify-content: space-between; color: #fff; font-size: 1.4rem; font-weight: 500; text-shadow: 0 .1rem .6rem rgba(0, 0, 0, .5); }
.similar .s-nav { display: flex; gap: .8rem; }
.similar .s-nav .round-light { background: rgba(255, 255, 255, .88); color: #5b6273; }
.similar .s-card { background: rgba(255, 255, 255, .86); border-radius: .2rem; padding: 1.6rem 1.8rem; backdrop-filter: blur(6px); animation: card-in var(--med) var(--ease); }
.similar .s-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 1.6rem; }
.similar .s-grid b { display: block; font-size: 1.5rem; font-weight: 500; }
.similar .s-grid span { display: block; font-size: .85rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--caption); margin-top: .2rem; }
.similar .s-price { margin-top: 1.4rem; padding-top: 1.2rem; border-top: .1rem solid rgba(0, 0, 0, .1); font-size: 1.6rem; font-weight: 500; }
.similar .s-btn { height: 3.6rem; background: rgba(255, 255, 255, .84); color: #3a4054; font-size: 1.05rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; border-radius: .1rem; }
.similar .s-empty { color: #fff; font-size: 1.2rem; opacity: .8; }

/* --------------------------------------------------------------- compare */
#compare { background: rgba(12, 16, 30, .35); display: flex; align-items: center; justify-content: center; padding: 11rem 6rem 9.6rem; }
.cmp-panel { position: relative; max-width: 100%; max-height: 100%; background: var(--panel); box-shadow: var(--shadow); border-radius: .2rem; padding: 3.2rem 3.6rem 3.4rem; display: flex; flex-direction: column; animation: card-in var(--med) var(--ease); }
.cmp-head { display: flex; align-items: center; justify-content: space-between; gap: 4rem; margin-bottom: 2.4rem; }
.cmp-head h2 { margin: 0; font-size: 2.2rem; font-weight: 300; letter-spacing: .14em; text-transform: uppercase; }
.cmp-head .r { display: flex; gap: 1.2rem; align-items: center; }
.cmp-scroll { overflow-x: auto; touch-action: pan-x; scrollbar-width: thin; }
.cmp-table { display: grid; grid-auto-flow: column; grid-auto-columns: 27rem; gap: 0 1.6rem; }
.cmp-col { display: flex; flex-direction: column; border: .1rem solid #e3e6ec; border-radius: .2rem; background: #fff; position: relative; }
.cmp-col .plan { height: 17rem; padding: 1.2rem; border-bottom: .1rem solid #eef0f3; overflow: hidden; }
.cmp-col .plan img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cmp-col h4 { margin: 1.4rem 1.6rem .6rem; font-size: 1.6rem; font-weight: 400; letter-spacing: .1em; }
.cmp-col dl { margin: 0 1.6rem 1.4rem; display: grid; grid-template-columns: auto 1fr; gap: .7rem 1.2rem; font-size: 1.2rem; }
.cmp-col dt { color: var(--caption); font-size: 1rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; align-self: center; }
.cmp-col dd { margin: 0; text-align: right; font-weight: 500; }
.cmp-col .btn-navy { margin: auto 1.6rem 1.6rem; width: auto; height: 3.6rem; }
.cmp-col .rm { position: absolute; top: .8rem; right: .8rem; z-index: 2; width: 3.6rem; height: 3.6rem; box-shadow: 0 .2rem .8rem rgba(20,30,60,.15); }
.cmp-empty { width: 64rem; padding: 4rem 0 2rem; text-align: center; color: #5b6273; font-size: 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 2rem; }
.cmp-empty .ico { width: 5rem; height: 5rem; color: #c3c8d2; }
.cmp-best { color: var(--navy); }

/* --------------------------------------------------------------- location */
#location { background: #dfe1e4; overflow: hidden; }
.map-viewport { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; }
.map-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.map-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity 400ms; }
.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.map-svg .ring { fill: none; stroke: var(--navy); stroke-opacity: .55; stroke-dasharray: 6 6; }
.map-svg .ring-lbl { fill: var(--navy); font-weight: 600; letter-spacing: .1em; }
.map-svg .route { stroke: var(--navy); stroke-width: 3; stroke-dasharray: 10 8; fill: none; animation: dash 1s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -18; } }
body.map-night .map-svg .ring { stroke: #fff; }
body.map-night .map-svg .ring-lbl { fill: #fff; }
body.map-night .map-svg .route { stroke: #ffd38a; }
.map-pins { position: absolute; inset: 0; }
.pin {
  position: absolute; transform: translate(-50%, -100%); display: flex; align-items: center; gap: .8rem; pointer-events: auto;
  padding: .5rem 1.1rem .5rem .5rem; background: #fff; border-radius: 2.4rem; box-shadow: 0 .2rem 1rem rgba(0, 0, 0, .25);
  font-size: 1.15rem; font-weight: 500; white-space: nowrap; transition: transform var(--fast), opacity var(--fast);
  transform-origin: 50% 100%;
}
.pin::after { content: ''; position: absolute; left: 50%; bottom: -.7rem; margin-left: -.7rem; border: .7rem solid transparent; border-bottom: 0; border-top-color: #fff; }
.pin .pi { width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; }
.pin .pi .ico { width: 1.6rem; height: 1.6rem; stroke-width: 1.8; }
.pin.dim { opacity: .0; pointer-events: none; }
.pin.on { z-index: 2; background: var(--navy); color: #fff; }
.pin.on::after { border-top-color: var(--navy); }
.pin.on .pi { background: #fff; color: var(--navy); }
.pin .info { display: none; color: inherit; font-size: 1.1rem; font-weight: 400; opacity: .85; }
.pin.on .info { display: inline; }
.project-pin { position: absolute; z-index: 3; transform: translate(-50%, -50%); width: 7rem; height: 7rem; pointer-events: none; display: grid; place-items: center; }
.project-pin::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(30, 42, 85, .25); animation: pulse 2.4s infinite var(--ease); }
.project-pin i { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--navy); border: .4rem solid #fff; box-shadow: 0 .2rem .8rem rgba(0, 0, 0, .35); }
.project-pin span { position: absolute; bottom: 100%; margin-bottom: -.4rem; white-space: nowrap; font-size: 1.3rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--navy); background: rgba(255, 255, 255, .9); padding: .4rem 1rem; border-radius: .2rem; }
.map-cats { position: absolute; z-index: 5; left: 4.2rem; top: 14rem; display: flex; flex-direction: column; gap: .6rem; width: 26rem; }
.map-cats button {
  display: flex; align-items: center; gap: 1.2rem; height: 4.6rem; padding: 0 1.4rem; background: rgba(255, 255, 255, .92);
  box-shadow: 0 .2rem 1rem rgba(10, 16, 40, .12); border-radius: .2rem; font-size: 1.25rem; font-weight: 500; text-align: left;
}
.map-cats button .ico { width: 2.2rem; height: 2.2rem; color: var(--navy); }
.map-cats button.on { background: var(--navy); color: #fff; }
.map-cats button.on .ico { color: #fff; }
.map-cats button .n { margin-left: auto; font-size: 1.05rem; opacity: .6; }
.map-tools { position: absolute; right: 3.2rem; bottom: 9.6rem; display: flex; flex-direction: column; gap: 1rem; }
.map-tools .round-light { width: 4.6rem; height: 4.6rem; color: var(--navy); }

/* --------------------------------------------------------------- gallery + lightbox */
#gallery { padding: 11rem 8rem 9.6rem; display: flex; flex-direction: column; gap: 2.6rem; }
.chips { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; }
.chips button { height: 3.8rem; padding: 0 2.2rem; border: .1rem solid rgba(255, 255, 255, .35); color: #fff; font-size: 1.2rem; font-weight: 500; letter-spacing: .08em; border-radius: .2rem; transition: background var(--fast); }
.chips button.on { background: #fff; color: var(--navy); border-color: #fff; }
.gal-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; align-content: start; touch-action: pan-y; scrollbar-width: none; }
.gal-grid::-webkit-scrollbar { display: none; }
.gal-item { position: relative; display: block; width: 100%; height: 0; padding: 0 0 56.25%; border: 0; align-self: start; overflow: hidden; border-radius: .2rem; background: #1d2338; animation: card-in var(--med) var(--ease) both; }
.gal-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 500ms var(--ease); }
.gal-item:active img { transform: scale(1.03); }
.gal-item span { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem 1.4rem 1.1rem; color: #fff; font-size: 1.2rem; font-weight: 500; text-align: left; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }
.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(8, 10, 18, .97); animation: fade-in var(--med) var(--ease); }
.lb-stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; display: grid; place-items: center; }
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: 50% 50%; will-change: transform; transition: opacity 250ms; }
.lb-nav { position: absolute; top: 50%; margin-top: -2.6rem; width: 5.2rem; height: 5.2rem; }
.lb-nav.prev { left: 3.2rem; } .lb-nav.next { right: 3.2rem; }
.lb-nav .ico { width: 2.4rem; height: 2.4rem; }
.lb-close { position: absolute; top: 3.2rem; right: 3.2rem; width: 4.6rem; height: 4.6rem; }
.lb-caption { position: absolute; left: 0; right: 0; bottom: 3rem; text-align: center; color: #fff; font-size: 1.35rem; font-weight: 500; letter-spacing: .06em; text-shadow: 0 .1rem .6rem rgba(0, 0, 0, .6); }
.lb-caption small { margin-left: 1.6rem; opacity: .6; font-weight: 400; }

/* --------------------------------------------------------------- modal */
.modal { position: fixed; inset: 0; z-index: 70; background: rgba(12, 16, 30, .45); display: grid; place-items: center; animation: fade-in var(--fast); }
.gal-empty { grid-column: 1 / -1; text-align: center; opacity: 0.6; padding: 4rem 0; font-size: 1.4rem; }