html, body { margin:0; padding:0; background:#090807; color:#f4ead6; font-family: Georgia, 'Times New Roman', serif; height:100%; overflow:hidden; }
button, input { font-family: Arial, Helvetica, sans-serif; }
.vm-topbar { position:fixed; top:0; left:0; right:0; height:70px; z-index:20; display:flex; align-items:center; background:linear-gradient(#111,#070707); border-bottom:0; box-shadow:0 3px 12px #000; }
.vm-brand { width:330px; padding-left:26px; color:#cda35a; display:flex; align-items:center; gap:12px; letter-spacing:2px; }
.vm-brand strong { display:block; font-size:24px; } .vm-brand em { display:block; font-size:12px; font-style:normal; letter-spacing:5px; }
.vm-icon { font-size:34px; border:1px solid #9f7635; padding:2px 7px; }
.vm-nav { flex:1; display:flex; height:70px; }
.vm-nav button { color:#f4ead6; background:transparent; border:0; border-left:1px solid #2c2c2c; padding:0 26px; font-size:16px; letter-spacing:1px; cursor:pointer; }
.vm-nav button:hover, .vm-bottombar button:hover { background:#1b1510; color:#ffd98c; }
.vm-search { margin-right:24px; display:flex; border:1px solid #7d6338; border-radius:6px; overflow:hidden; background:#0b0f13; }
.vm-search input { width:260px; padding:12px; color:#f4ead6; background:#101418; border:0; font-size:15px; }
.vm-search button { width:44px; background:#0d1013; color:#d6ad62; border:0; font-size:22px; cursor:pointer; }
.museum { position:absolute; top:70px; bottom:64px; left:0; right:0; overflow:hidden; background:radial-gradient(circle at 50% 42%, rgba(255,220,150,.17), transparent 26%), linear-gradient(180deg,#3c2c20 0%,#2a2019 34%,#5c4d3f 74%,#1a1512 100%); perspective:900px; }
.museum:before { content:''; position:absolute; top:0; left:0; right:0; height:34%; background:repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 2px, transparent 2px, transparent 120px), linear-gradient(#6b513b,#2a211b); clip-path:polygon(18% 0,82% 0,65% 100%,35% 100%); border-bottom:3px solid #8c6732; }
.museum:after { content:''; position:absolute; left:-20%; right:-20%; bottom:-20%; height:58%; background:repeating-linear-gradient(90deg, rgba(0,0,0,.15) 0 2px, transparent 2px 120px), repeating-linear-gradient(0deg, rgba(0,0,0,.17) 0 2px, transparent 2px 90px), linear-gradient(#86745d,#3b3027); transform:rotateX(63deg); transform-origin:bottom; }
.room-title { position:absolute; top:18px; left:50%; width:460px; margin-left:-230px; z-index:5; text-align:center; padding:16px 20px 12px; background:linear-gradient(#111,#070707); border:2px solid #a57b37; box-shadow:0 0 0 4px #24180c, 0 6px 18px #000; }
.room-title h1 { margin:0; font-size:44px; color:#d9bd82; letter-spacing:2px; } .room-title p { margin:2px 0 0; color:#d8bd82; font-size:18px; }.room-number { position:absolute; left:50%; bottom:-38px; margin-left:-58px; background:#100d0a; border:1px solid #8c6732; padding:6px 18px; color:#d8bd82; font-size:13px; }
.room-card { position:absolute; top:16px; left:18px; width:230px; z-index:8; background:rgba(8,8,8,.86); border:1px solid #8c6732; border-radius:4px; padding:16px; box-shadow:0 4px 18px #000; font-family:Arial, Helvetica, sans-serif; }
.room-card h3, .kiosk h3 { margin:0 0 12px; color:#e0b866; font-size:14px; letter-spacing:1px; text-align:center; }.room-card p { line-height:1.5; margin:0 0 12px; }.room-card button { width:100%; padding:10px; background:#1d1712; border:1px solid #8c6732; color:#e0b866; }
.wall { position:absolute; z-index:4; top:118px; bottom:64px; width:40%; overflow:auto; padding:18px 18px 160px; }
.left-wall { left:0; transform:skewY(5deg); transform-origin:left top; padding-left:60px; padding-right:80px; }
.right-wall { right:0; transform:skewY(-5deg); transform-origin:right top; padding-left:80px; padding-right:60px; }
.center-arch { position:absolute; top:210px; left:37%; right:37%; bottom:250px; z-index:13; border:18px solid #21150d; border-bottom:0; border-radius:120px 120px 0 0; box-shadow:inset 0 0 0 4px #9b7335, 0 0 22px #000; background:rgba(0,0,0,.25); }
.fixture { margin-bottom:26px; background:linear-gradient(90deg,#26180f,#49331e,#21150d); border:2px solid #9f7635; box-shadow:0 6px 18px #000; padding:12px; }
.fixture-title { text-align:center; font-size:25px; color:#f0d29a; letter-spacing:2px; border-bottom:0; padding:4px 0 9px; margin-bottom:10px; text-transform:uppercase; }
.group-bay { display:inline-block; vertical-align:top; width:184px; margin:7px; background:#100d0a; border:1px solid #775528; box-shadow:inset 0 0 16px #000; padding:9px; }
.group-title { text-align:center; color:#f1d49d; font-size:13px; margin-bottom:8px; border-bottom:1px solid #553a1d; padding-bottom:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.item-tile { display:inline-block; width:78px; position:relative; z-index:20; margin:4px; vertical-align:top; cursor:pointer; font-family:Arial, Helvetica, sans-serif; }
.item-img { height:104px; background:#eee; border:4px solid #2a1c12; box-shadow:0 0 0 1px #b98b45; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.item-img img { max-width:100%; max-height:100%; display:block; }
.item-caption { font-size:10px; line-height:1.2; height:25px; overflow:hidden; color:#f8ead0; text-align:center; }
.item-rec { font-size:9px; color:#cdb57e; text-align:center; }
.new-arrivals { position:absolute; left:0; bottom:78px; width:350px; z-index:10; background:linear-gradient(#3a2516,#17100a); border:2px solid #9f7635; box-shadow:0 6px 24px #000; }
.fixture-heading { text-align:center; padding:12px; border-bottom:1px solid #8c6732; }.fixture-heading h2 { margin:0; font-size:29px; letter-spacing:1px; }.fixture-heading p { margin:2px 0 0; font-size:14px; }
.glass-case { min-height:230px; padding:12px; background:linear-gradient(90deg, rgba(255,255,255,.2), rgba(255,255,255,.05), rgba(255,255,255,.19)); border-top:1px solid rgba(255,255,255,.45); }
.glass-case .item-tile { width:88px; }.glass-case .item-img { height:116px; position:relative; }.glass-case .item-img:before { content:'NEW'; position:absolute; top:5px; left:-20px; color:white; background:#9d1e13; padding:2px 22px; transform:rotate(-35deg); font-size:10px; z-index:2; }
.kiosk { position:absolute; right:28px; bottom:60px; width:318px; z-index:12; background:linear-gradient(#151515,#0a0a0a); border:8px solid #2b1c11; box-shadow:0 6px 22px #000; padding:18px; transform:perspective(400px) rotateX(5deg); font-family:Arial, Helvetica, sans-serif; }
.kiosk p { margin:0 0 12px; text-align:center; font-size:12px; }.kiosk form { display:flex; border:1px solid #4d7690; }.kiosk input { flex:1; padding:10px; background:#0c1b25; border:0; color:#fff; }.kiosk form button { width:45px; background:#0b141b; color:#e0b866; border:0; font-size:20px; }.kiosk-buttons { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }.kiosk-buttons button { padding:10px 4px; background:#15212b; color:#dfeeff; border:1px solid #2e5065; font-size:11px; }
.search-results { max-height:200px; overflow:auto; margin-top:10px; font-size:12px; }.result-row { display:flex; gap:8px; padding:6px; border-top:1px solid #26333d; cursor:pointer; }.result-row img { width:36px; height:48px; object-fit:contain; background:#eee; }.result-row:hover { background:#1b2d38; }
.floor-medallion { position:absolute; z-index:6; bottom:45px; left:50%; width:220px; height:110px; margin-left:-110px; border-radius:50%; background:radial-gradient(#a38456,#55402a); border:3px solid #7c5a2d; color:#2b1d12; display:flex; align-items:center; justify-content:center; text-align:center; font-weight:bold; letter-spacing:2px; box-shadow:0 6px 22px #000; }.floor-medallion span { font-size:11px; }
.bench { position:absolute; z-index:7; left:50%; bottom:205px; width:140px; height:50px; margin-left:-70px; background:linear-gradient(#6b4428,#2a180e); border-radius:18px 18px 8px 8px; box-shadow:0 15px 20px rgba(0,0,0,.5); }
.vm-bottombar { position:fixed; bottom:0; left:0; right:0; height:64px; z-index:30; background:linear-gradient(#111,#070707); border-top:1px solid #9f7635; display:flex; align-items:center; gap:12px; padding:0 28px; box-sizing:border-box; }.vm-bottombar button { height:42px; padding:0 24px; background:#111; color:#d9bd82; border:1px solid #8c6732; border-radius:5px; text-transform:uppercase; letter-spacing:1px; }.where { flex:1; text-align:center; color:#b88d4b; letter-spacing:1px; }.where span { display:block; color:#e0b866; font-size:16px; }
.overlay-panel { position:fixed; z-index:100; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,.72); display:flex; align-items:center; justify-content:center; }.hidden { display:none; }.overlay-box { position:relative; width:82%; max-height:82%; overflow:auto; background:#111; border:2px solid #9f7635; padding:26px; box-shadow:0 8px 40px #000; }.close { position:absolute; top:8px; right:10px; font-size:32px; color:#d9bd82; background:transparent; border:0; cursor:pointer; }.category-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }.category-card { padding:16px; background:#1d1712; border:1px solid #8c6732; cursor:pointer; }.category-card:hover { background:#2a2018; }.category-card strong { display:block; color:#f3d396; }.item-box { text-align:center; max-width:680px; }.item-box img { max-width:90%; max-height:60vh; background:#eee; border:8px solid #2a1c12; }
@media (max-width:900px){ body{overflow:auto}.vm-topbar{position:relative;height:auto;display:block}.vm-brand{padding:12px}.vm-nav{height:auto}.museum{position:relative;top:0;bottom:auto;min-height:900px}.room-title{left:20px;right:20px;width:auto;margin:0}.room-card,.kiosk,.new-arrivals{position:relative;left:auto;right:auto;bottom:auto;top:auto;width:auto;margin:12px;}.wall{position:relative;top:auto;bottom:auto;left:auto!important;right:auto!important;width:auto;transform:none!important;padding:12px}.vm-bottombar{position:relative;height:auto;flex-wrap:wrap;padding:12px}.center-arch,.bench,.floor-medallion{display:none}}
/* Museum artifact/item viewer v3 */
.museum-artifact-viewer { width:92%; max-width:1180px; max-height:88%; padding:0; background:linear-gradient(#1b130c,#0d0906); }
#itemViewerContent { min-height:420px; }
.artifact-layout { display:table; width:100%; table-layout:fixed; }
.artifact-image-area, .artifact-info-area { display:table-cell; vertical-align:top; box-sizing:border-box; }
.artifact-image-area { width:64%; padding:28px; background:radial-gradient(circle at 50% 35%, rgba(255,230,170,.14), transparent 44%), linear-gradient(#2b1c11,#0f0b08); border-right:1px solid #8c6732; }
.artifact-info-area { width:36%; padding:30px 28px 80px; font-family:Arial, Helvetica, sans-serif; color:#f5ead4; }
.artifact-info-area h2 { margin:0 44px 18px 0; color:#f3d396; font-family:Georgia,'Times New Roman',serif; font-size:28px; line-height:1.15; }
.artifact-main-frame { min-height:430px; max-height:58vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#f8f2e6,#c9b693); border:12px solid #2a1c12; box-shadow:0 0 0 2px #b98b45, inset 0 0 38px rgba(0,0,0,.32), 0 12px 28px #000; }
.artifact-main-frame img { max-width:100%; max-height:58vh; object-fit:contain; background:#f7f3e8; }
.artifact-image-tools { display:flex; align-items:center; justify-content:center; gap:16px; margin:16px 0 10px; color:#e0b866; font-family:Arial, Helvetica, sans-serif; }
.artifact-image-tools button { width:42px; height:34px; background:#111; color:#e0b866; border:1px solid #8c6732; border-radius:4px; font-size:28px; line-height:26px; cursor:pointer; }
.artifact-thumbs { text-align:center; min-height:32px; }
.artifact-thumbs button { margin:3px; min-width:34px; height:28px; background:#17110c; color:#e0b866; border:1px solid #6e4d24; border-radius:3px; cursor:pointer; }
.artifact-thumbs button.active { background:#d3ad63; color:#111; }
.artifact-key-plaque { margin:16px auto 0; max-width:360px; text-align:center; background:#0c0906; color:#e5c37e; border:1px solid #8c6732; padding:10px; letter-spacing:1px; font-family:Georgia,'Times New Roman',serif; }
.artifact-section { margin:0 0 20px; padding:0 0 16px; border-bottom:1px solid rgba(159,118,53,.45); }
.artifact-section h3 { margin:0 0 10px; color:#e0b866; font-size:14px; letter-spacing:1px; text-transform:uppercase; }
.artifact-section dl { margin:0; }
.artifact-field { display:block; padding:6px 0; border-top:1px solid rgba(255,255,255,.06); }
.artifact-field:first-child { border-top:0; }
.artifact-field dt { display:block; color:#bca06b; font-size:11px; text-transform:uppercase; letter-spacing:.8px; margin-bottom:2px; }
.artifact-field dd { display:block; margin:0; color:#fff5df; font-size:14px; line-height:1.35; white-space:pre-wrap; word-wrap:break-word; }
@media (max-width:900px){ .artifact-layout,.artifact-image-area,.artifact-info-area{display:block;width:auto}.artifact-image-area{border-right:0;border-bottom:1px solid #8c6732;padding:16px}.artifact-info-area{padding:18px}.artifact-main-frame{min-height:260px}.artifact-main-frame img{max-height:46vh} }
/* Fixture Library v1: category-driven fixture types */
.fixture-title span { display:block; }
.fixture-title em { display:block; margin-top:3px; font-family:Arial, Helvetica, sans-serif; font-style:normal; font-size:10px; letter-spacing:2px; color:#bfa36b; opacity:.95; }
.fixture-items { position:relative; z-index:2; }
/* 1. Museum Wall Case: framed wall display for paper/flat collectibles */
.fixture-wall_case { background:linear-gradient(90deg,#17110b,#332216,#17110b); border-width:3px; }
.fixture-wall_case .group-bay { background:linear-gradient(#2a1b10,#100b07); border:3px solid #b78b49; box-shadow:inset 0 0 0 3px rgba(255,244,214,.12), inset 0 0 28px #000, 0 4px 16px #000; }
.fixture-wall_case .item-img { border:6px solid #3a2718; box-shadow:0 0 0 2px #c39a54, inset 0 0 18px rgba(0,0,0,.2); background:#f8f2e6; }
/* 2. Glass Display Cabinet: luminous cabinet for boxed/dimensional collectibles */
.fixture-glass_cabinet { background:linear-gradient(90deg,#0e1417,#263642,#0e1417); border-color:#c8a767; box-shadow:0 8px 24px #000, inset 0 0 24px rgba(255,255,255,.08); }
.fixture-glass_cabinet .group-bay { background:linear-gradient(120deg,rgba(255,255,255,.23),rgba(255,255,255,.05) 38%,rgba(255,255,255,.16)), linear-gradient(#16242d,#071014); border-color:#8fb1bd; box-shadow:inset 0 0 24px rgba(255,255,255,.12), 0 5px 16px #000; }
.fixture-glass_cabinet .group-bay:after { content:''; display:block; height:9px; margin:8px -9px -9px; background:linear-gradient(#6e512d,#21150d); border-top:1px solid rgba(255,255,255,.25); }
.fixture-glass_cabinet .item-img { background:#f5efe0; border-color:#2f4350; box-shadow:0 0 0 1px #a6cbd6, 0 0 16px rgba(255,255,255,.18); }
/* 3. Pegboard Display: retail carded toy wall */
.fixture-pegboard { background:linear-gradient(90deg,#21170e,#4a311c,#21170e); }
.fixture-pegboard .group-bay { background-color:#6f4e2c; background-image:radial-gradient(circle,rgba(20,12,6,.55) 1.7px,transparent 2px); background-size:14px 14px; border-color:#2b1a0d; box-shadow:inset 0 0 22px rgba(0,0,0,.45), 0 4px 14px #000; }
.fixture-pegboard .item-tile:before { content:''; position:absolute; top:1px; left:50%; width:2px; height:18px; background:#c8b18a; z-index:1; box-shadow:0 0 0 1px #3c2a18; }
.fixture-pegboard .item-img { margin-top:12px; }
/* 4. Gondola Shelf: general merchandise shelving */
.fixture-gondola_shelf { background:linear-gradient(90deg,#20170f,#3a2a1b,#20170f); }
.fixture-gondola_shelf .group-bay { background:linear-gradient(#22170f 0,#22170f 70%,#6b4a27 70%,#2e1e11 77%,#120c08 77%); border-color:#8a6736; }
.fixture-gondola_shelf .item-img { border-bottom-width:8px; }
/* 5. Flat File Cabinet: drawers for posters/large paper */
.fixture-flat_file { background:linear-gradient(#302317,#17110b); }
.fixture-flat_file .group-bay { display:block; width:auto; min-height:138px; background:repeating-linear-gradient(0deg,#21160e 0,#21160e 32px,#6f542e 33px,#17100a 38px); border-color:#b0874a; }
.fixture-flat_file .item-tile { width:96px; }
.fixture-flat_file .item-img { height:70px; border-width:3px; }
.fixture-flat_file .item-caption { height:24px; }
/* 6. Binder Browsing Table: future manual override type */
.fixture-binder_table .group-bay { background:linear-gradient(110deg,#1b120b,#3d2a18,#120c08); border-radius:8px; }
/* 7. Featured Pedestal: future manual override type */
.fixture-pedestal .group-bay { background:radial-gradient(circle at 50% 35%,rgba(255,228,160,.18),transparent 52%),#120c08; border-radius:80px 80px 18px 18px; }
/* v7 Real-World Fixture Pass: make displays feel like attached museum/retail fixtures, not floating windows */
.museum { background:
radial-gradient(circle at 50% 42%, rgba(255,220,150,.14), transparent 25%),
linear-gradient(180deg,#4b382a 0%,#352820 38%,#6d5e4c 76%,#1a1512 100%); }
.wall { overflow-y:auto; overflow-x:hidden; padding-top:86px; padding-bottom:190px; box-sizing:border-box; }
.left-wall { padding-left:72px; padding-right:120px; }
.right-wall { padding-left:120px; padding-right:72px; }
.center-arch { z-index:3; pointer-events:none; }
.arch-plaque { position:absolute; left:50%; top:38%; width:220px; margin-left:-110px; text-align:center; background:rgba(8,6,4,.78); border:1px solid #9f7635; color:#e0b866; padding:12px; box-shadow:0 8px 22px #000; }
.arch-plaque strong { display:block; font-size:15px; text-transform:uppercase; letter-spacing:1px; }
.arch-plaque span { display:block; margin-top:4px; font-size:11px; font-family:Arial,Helvetica,sans-serif; color:#d7c19a; }
.wall .fixture { position:relative; width:92%; max-width:650px; min-height:210px; margin:0 0 30px; padding:18px 18px 24px; background:linear-gradient(#3b2819,#1b110a 78%,#120b07); border:0; box-shadow:0 14px 22px rgba(0,0,0,.55); }
.left-wall .fixture { margin-left:auto; margin-right:0; transform:perspective(900px) rotateY(3deg); }
.right-wall .fixture { margin-left:0; margin-right:auto; transform:perspective(900px) rotateY(-3deg); }
.wall .fixture:before { content:''; position:absolute; left:-8px; right:-8px; top:-14px; height:18px; background:linear-gradient(#b38745,#4a2f18); border:1px solid #c49a54; box-shadow:0 4px 8px rgba(0,0,0,.45); }
.wall .fixture:after { content:''; position:absolute; left:-14px; right:-14px; bottom:-18px; height:24px; background:linear-gradient(#4e321b,#1a0f08); border-top:2px solid #a47a38; box-shadow:0 8px 14px rgba(0,0,0,.5); }
.fixture-title { position:relative; z-index:2; border-bottom:0; margin-bottom:16px; padding:2px 0 12px; font-size:25px; text-shadow:0 2px 3px #000; }
.group-bay { position:relative; z-index:2; box-sizing:border-box; }
.fixture-items { min-height:115px; }
.item-tile { z-index:8; }
.item-tile:hover { filter:brightness(1.18); transform:translateY(-2px); }
.item-img { background:#f3ead6; }
/* Physical wall case: a framed glazed cabinet mounted into the wall */
.fixture-wall_case { background:linear-gradient(#3f2a19,#1d120a 72%,#0f0905); box-shadow:inset 0 0 0 3px rgba(203,161,89,.18), 0 16px 25px #000; }
.fixture-wall_case .group-bay { width:176px; min-height:178px; background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.035) 42%,rgba(255,255,255,.13)),#160e08; border:5px solid #5c3b1e; box-shadow:0 0 0 2px #c0934d, inset 0 0 22px #000; }
.fixture-wall_case .group-bay:after { content:''; position:absolute; inset:4px; pointer-events:none; background:linear-gradient(115deg,rgba(255,255,255,.22),transparent 38%,rgba(255,255,255,.08) 52%,transparent 70%); }
/* Glass cabinet: vertical cabinet with shelves and transparent front */
.fixture-glass_cabinet { background:linear-gradient(#2c1c10,#0d0906); padding-bottom:34px; }
.fixture-glass_cabinet .group-bay { width:190px; min-height:255px; background:linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,255,255,.04),rgba(255,255,255,.16)),linear-gradient(#27190f,#0b0704); border:6px solid #3a2515; box-shadow:0 0 0 2px #b68845, inset 0 0 28px #000; }
.fixture-glass_cabinet .group-bay:before { content:''; position:absolute; left:8px; right:8px; top:92px; height:2px; background:rgba(228,209,166,.55); box-shadow:0 86px 0 rgba(228,209,166,.42); }
.fixture-glass_cabinet .item-tile { width:72px; }
.fixture-glass_cabinet .item-img { height:94px; border-width:3px; background:#f8f1df; }
/* Pegboard: toy-store wall display with visible holes and hanging pegs */
.fixture-pegboard { background:linear-gradient(#4a2f1a,#25160b); }
.fixture-pegboard .group-bay { width:194px; min-height:260px; background-color:#7a5831; background-image:radial-gradient(circle,rgba(22,13,6,.62) 1.6px,transparent 2px); background-size:14px 14px; border:8px solid #2a180b; box-shadow:0 0 0 2px #b18547, inset 0 0 20px rgba(0,0,0,.45); }
.fixture-pegboard .item-tile:before { content:''; position:absolute; top:0; left:50%; width:34px; height:2px; margin-left:-17px; background:#d8c29b; box-shadow:0 2px 0 #4a3219; z-index:1; }
.fixture-pegboard .item-img { margin-top:11px; }
/* Gondola shelf: freestanding retail shelf against wall with real shelf lines */
.fixture-gondola_shelf { background:linear-gradient(#3a2a1c,#20150c); padding-bottom:38px; }
.fixture-gondola_shelf .group-bay { width:205px; min-height:245px; padding-bottom:18px; background:
linear-gradient(0deg,transparent 0 62px,rgba(191,146,77,.58) 63px 68px,transparent 69px 130px,rgba(191,146,77,.52) 131px 136px,transparent 137px),
linear-gradient(#21150c,#120b06); border:5px solid #5f3c1e; box-shadow:0 0 0 2px #b28542, inset 0 0 24px #000; }
.fixture-gondola_shelf .group-bay:after { content:''; position:absolute; left:0; right:0; bottom:-14px; height:16px; background:linear-gradient(#674323,#1c1007); border-top:2px solid #ba8d47; }
.fixture-gondola_shelf .item-tile { width:76px; margin:5px; }
.fixture-gondola_shelf .item-img { height:96px; border-width:3px; border-bottom-width:7px; }
/* Flat file: broad drawer cabinet, not a popup */
.fixture-flat_file { background:linear-gradient(#302116,#110a06); }
.fixture-flat_file .group-bay { display:block; width:auto; min-height:145px; margin:12px 4px 20px; padding-left:22px; background:
repeating-linear-gradient(0deg,#21150c 0,#21150c 28px,#6d4b28 29px,#6d4b28 32px,#120b06 33px,#120b06 39px); border:5px solid #54351a; box-shadow:0 0 0 2px #bd8f47, inset 0 0 22px #000; }
.fixture-flat_file .group-title { text-align:left; padding-left:10px; }
.fixture-flat_file .item-tile { width:104px; }
.fixture-flat_file .item-img { height:74px; border-width:3px; }
/* New arrivals should read as a real glass case near the entrance */
.new-arrivals { border-width:3px; background:linear-gradient(#4b2d17,#1b1008); box-shadow:0 10px 26px #000; }
.glass-case { position:relative; background:linear-gradient(120deg,rgba(255,255,255,.26),rgba(255,255,255,.06) 38%,rgba(255,255,255,.19)),rgba(60,42,28,.55); box-shadow:inset 0 0 26px rgba(255,255,255,.08); }
.glass-case:after { content:''; position:absolute; left:0; right:0; bottom:-18px; height:22px; background:linear-gradient(#5b3a1e,#211207); border-top:2px solid #b98b45; }
@media (max-width:900px){ .left-wall .fixture,.right-wall .fixture{transform:none;width:auto;max-width:none}.wall{padding-top:12px}.arch-plaque{display:none} }
/* v8 Floorplan Navigation Engine
The room is no longer one long stacked page. The browser renders one camera stop at a time:
Entrance -> Manufacturer Alcoves -> Kiosk. W/S or buttons move between stops. */
.museum[data-stop-kind] { overflow:hidden; }
.museum[data-stop-kind]:before { height:36%; }
.museum[data-stop-kind]:after { height:60%; }
.museum[data-stop-kind] .wall {
top:160px;
bottom:104px;
width:36%;
overflow:hidden;
padding:16px 0 140px;
box-sizing:border-box;
z-index:6;
}
.museum[data-stop-kind] .left-wall {
left:24px;
padding-left:48px;
padding-right:20px;
transform:perspective(980px) rotateY(15deg) skewY(1deg);
transform-origin:left center;
}
.museum[data-stop-kind] .right-wall {
right:24px;
padding-left:20px;
padding-right:48px;
transform:perspective(980px) rotateY(-15deg) skewY(-1deg);
transform-origin:right center;
}
.museum[data-stop-kind] .wall .fixture {
width:92%;
max-width:none;
min-height:360px;
max-height:calc(100vh - 315px);
overflow:hidden;
margin-top:12px;
margin-bottom:0;
box-shadow:0 22px 34px rgba(0,0,0,.72), inset 0 0 28px rgba(255,214,140,.08);
}
.museum[data-stop-kind] .left-wall .fixture { margin-left:auto; transform:none; }
.museum[data-stop-kind] .right-wall .fixture { margin-right:auto; transform:none; }
.museum[data-stop-kind] .fixture-title { font-size:30px; }
.museum[data-stop-kind] .fixture-title em { font-size:11px; }
.museum[data-stop-kind] .group-bay { margin:9px; }
.museum[data-stop-kind] .fixture-items { max-height:250px; overflow:hidden; }
.museum[data-stop-kind="entrance"] .new-arrivals {
left:42px;
bottom:88px;
width:430px;
z-index:12;
transform:perspective(700px) rotateY(5deg);
}
.museum[data-stop-kind="entrance"] .glass-case {
min-height:255px;
max-height:255px;
overflow:hidden;
}
.museum[data-stop-kind="entrance"] .left-wall,
.museum[data-stop-kind="entrance"] .right-wall {
opacity:.72;
filter:blur(.2px) brightness(.88);
}
.museum[data-stop-kind="entrance"] .distant-sign {
margin-top:95px;
}
.museum[data-stop-kind="alcove"] .new-arrivals,
.museum[data-stop-kind="kiosk"] .new-arrivals { display:none; }
.museum[data-stop-kind="kiosk"] .kiosk {
right:66px;
bottom:108px;
width:380px;
display:block;
transform:perspective(650px) rotateY(-6deg) rotateX(3deg);
}
.museum[data-stop-kind="entrance"] .kiosk,
.museum[data-stop-kind="alcove"] .kiosk { display:none; }
.distant-sign,
.empty-wall-label,
.gallery-exit-wall {
margin:120px auto 0;
width:74%;
min-height:170px;
background:linear-gradient(#342316,#120b06);
border:3px solid #9f7635;
box-shadow:0 18px 28px rgba(0,0,0,.65), inset 0 0 0 4px rgba(255,225,160,.06);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
color:#e0c184;
text-transform:uppercase;
letter-spacing:1px;
}
.distant-sign strong,
.gallery-exit-wall strong { font-size:28px; display:block; }
.distant-sign span,
.gallery-exit-wall span,
.empty-wall-label { font-family:Arial,Helvetica,sans-serif; font-size:12px; color:#d6c39e; margin-top:8px; text-transform:none; }
.walk-controls {
position:absolute;
left:50%;
bottom:22px;
z-index:18;
width:520px;
margin-left:-260px;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
pointer-events:auto;
}
.walk-controls button {
min-width:118px;
height:42px;
background:#120e0a;
color:#e3bd72;
border:1px solid #9f7635;
border-radius:5px;
text-transform:uppercase;
letter-spacing:1px;
cursor:pointer;
}
.walk-controls button:disabled { opacity:.35; cursor:default; }
.walk-status {
flex:1;
min-height:42px;
padding:8px 12px;
box-sizing:border-box;
background:rgba(8,8,8,.82);
border:1px solid #70532a;
text-align:center;
box-shadow:0 6px 14px #000;
}
.walk-status strong { display:block; color:#f0d29a; font-size:14px; }
.walk-status span { display:block; font-family:Arial,Helvetica,sans-serif; font-size:11px; color:#c9b38c; margin-top:2px; }
.mini-map {
position:absolute;
left:18px;
bottom:92px;
width:230px;
z-index:15;
background:rgba(8,8,8,.82);
border:1px solid #8c6732;
padding:12px;
box-shadow:0 8px 20px #000;
font-family:Arial,Helvetica,sans-serif;
}
.mini-map h3 { margin:0 0 8px; color:#e0b866; font-size:13px; text-align:center; letter-spacing:1px; }
#miniMapPath { display:flex; flex-wrap:wrap; gap:7px; align-items:center; justify-content:center; }
.map-stop {
position:relative;
width:36px;
height:36px;
padding:0;
background:#15110d;
border:1px solid #5f4725;
color:#d7bd83;
cursor:pointer;
border-radius:50%;
}
.map-stop span { position:absolute; left:50%; top:50%; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:#8b6834; }
.map-stop em { position:absolute; left:-8px; right:-8px; bottom:-16px; font-style:normal; font-size:9px; color:#c6ad79; }
.map-stop.active { border-color:#e0b866; box-shadow:0 0 12px rgba(224,184,102,.45); }
.map-stop.active span { background:#f2d28f; }
.mini-map.collapsed { display:none; }
/* Ensure physical fixtures do not look like floating stacked browser windows in v8. */
.museum[data-stop-kind] .fixture-wall_case,
.museum[data-stop-kind] .fixture-glass_cabinet,
.museum[data-stop-kind] .fixture-pegboard,
.museum[data-stop-kind] .fixture-gondola_shelf,
.museum[data-stop-kind] .fixture-flat_file {
border-left:10px solid #26170b;
border-right:10px solid #26170b;
border-top:0;
}
.museum[data-stop-kind] .fixture-wall_case:before,
.museum[data-stop-kind] .fixture-glass_cabinet:before,
.museum[data-stop-kind] .fixture-pegboard:before,
.museum[data-stop-kind] .fixture-gondola_shelf:before,
.museum[data-stop-kind] .fixture-flat_file:before { height:24px; top:-20px; }
.museum[data-stop-kind] .fixture-wall_case:after,
.museum[data-stop-kind] .fixture-glass_cabinet:after,
.museum[data-stop-kind] .fixture-pegboard:after,
.museum[data-stop-kind] .fixture-gondola_shelf:after,
.museum[data-stop-kind] .fixture-flat_file:after { height:34px; bottom:-26px; }
@media (max-width:900px){
.museum[data-stop-kind] { overflow:auto; }
.museum[data-stop-kind] .wall { position:relative; top:auto; bottom:auto; left:auto!important; right:auto!important; width:auto; transform:none!important; padding:12px; }
.museum[data-stop-kind] .wall .fixture { max-height:none; min-height:0; width:auto; }
.walk-controls { position:relative; left:auto; bottom:auto; width:auto; margin:12px; }
.mini-map { position:relative; left:auto; bottom:auto; width:auto; margin:12px; }
}
/* v9 Real Room Layout Pass
- Make the arch/doorway extend down to the floor.
- Make displays taller and physically occupy wall space.
- Hide the map by default so it does not cover the left display.
- Add scrollable in-fixture sections so overflow items do not disappear into the floor. */
.museum[data-stop-kind] .center-arch,
.center-arch {
top:205px;
bottom:70px;
border-bottom:0;
border-left-width:20px;
border-right-width:20px;
z-index:3;
}
/* give the arch vertical legs that visually reach the floor */
.center-arch:before,
.center-arch:after {
content:'';
position:absolute;
bottom:-4px;
width:22px;
height:115px;
background:linear-gradient(#9b7335,#2b1b0f 70%,#130b06);
box-shadow:0 8px 18px rgba(0,0,0,.7);
}
.center-arch:before { left:-21px; }
.center-arch:after { right:-21px; }
.museum[data-stop-kind] .wall {
top:132px;
bottom:76px;
width:39%;
padding-top:12px;
padding-bottom:78px;
}
.museum[data-stop-kind] .left-wall {
left:18px;
padding-left:36px;
padding-right:16px;
}
.museum[data-stop-kind] .right-wall {
right:18px;
padding-left:16px;
padding-right:36px;
}
.museum[data-stop-kind] .wall .fixture {
min-height:470px;
max-height:calc(100vh - 255px);
overflow-y:auto;
overflow-x:hidden;
padding-bottom:42px;
scrollbar-color:#a57b37 #140d08;
scrollbar-width:thin;
}
.museum[data-stop-kind] .wall .fixture::-webkit-scrollbar,
.museum[data-stop-kind] .group-bay::-webkit-scrollbar,
.museum[data-stop-kind] .fixture-items::-webkit-scrollbar { width:9px; }
.museum[data-stop-kind] .wall .fixture::-webkit-scrollbar-track,
.museum[data-stop-kind] .group-bay::-webkit-scrollbar-track,
.museum[data-stop-kind] .fixture-items::-webkit-scrollbar-track { background:#140d08; }
.museum[data-stop-kind] .wall .fixture::-webkit-scrollbar-thumb,
.museum[data-stop-kind] .group-bay::-webkit-scrollbar-thumb,
.museum[data-stop-kind] .fixture-items::-webkit-scrollbar-thumb { background:#8c6732; border-radius:8px; }
.museum[data-stop-kind] .fixture-items {
max-height:none;
overflow:visible;
}
.museum[data-stop-kind] .group-bay {
max-height:385px;
overflow-y:auto;
overflow-x:hidden;
vertical-align:top;
}
/* Slightly taller, denser, more physical bays */
.museum[data-stop-kind] .fixture-gondola_shelf .group-bay,
.museum[data-stop-kind] .fixture-pegboard .group-bay,
.museum[data-stop-kind] .fixture-glass_cabinet .group-bay,
.museum[data-stop-kind] .fixture-wall_case .group-bay {
min-height:310px;
}
.more-items-note {
display:block;
clear:both;
margin:8px 4px 2px;
padding:6px 8px;
background:rgba(0,0,0,.42);
border:1px solid rgba(190,145,70,.55);
color:#e0c184;
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
text-align:center;
}
/* Map should not sit on top of the display by default. The bottom MAP button or M key opens it. */
.mini-map.collapsed { display:none !important; }
.mini-map {
left:auto;
right:24px;
bottom:86px;
width:210px;
max-height:58vh;
overflow:auto;
z-index:25;
}
/* when the map is open, keep it clear of the main left wall displays */
#miniMapPath { gap:6px; }
.map-stop { width:32px; height:32px; }
/* Physical scale refinements */
.museum[data-stop-kind] .fixture-title { font-size:31px; }
.museum[data-stop-kind] .item-tile { width:82px; }
.museum[data-stop-kind] .item-img { height:112px; }
.museum[data-stop-kind] .fixture-gondola_shelf .item-img,
.museum[data-stop-kind] .fixture-pegboard .item-img,
.museum[data-stop-kind] .fixture-glass_cabinet .item-img { height:106px; }
/* prevent the New Arrivals case from covering too much of the room in alcove/entrance view */
.museum[data-stop-kind="entrance"] .new-arrivals {
width:390px;
bottom:82px;
}
@media (max-width:900px){
.center-arch:before,.center-arch:after{display:none}
.museum[data-stop-kind] .wall .fixture{max-height:none;overflow:visible}
.museum[data-stop-kind] .group-bay{max-height:none;overflow:visible}
}
/* v10 Architecture and map-medallion refinements
- Ceiling plane now ends at the top of the central arch instead of cutting through it.
- Arch base stops at the rear floor line instead of overlaying the walkable foreground floor.
- Floor medallion is now a clickable Gallery Map control. */
:root{
--vm-arch-top: 205px;
--vm-floor-line: 142px; /* distance from bottom of museum viewport to rear floor/wall junction */
}
.museum:before{
height:var(--vm-arch-top);
clip-path:polygon(18% 0,82% 0,65% 100%,35% 100%);
border-bottom:3px solid #8c6732;
z-index:1;
}
.museum[data-stop-kind] .center-arch,
.center-arch{
top:var(--vm-arch-top);
bottom:var(--vm-floor-line);
z-index:3;
border-bottom:0;
background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.08));
}
.center-arch:before,
.center-arch:after{ display:none !important; }
.gallery-map-medallion,
.floor-medallion{
border:3px solid #7c5a2d;
cursor:pointer;
font-family:Georgia,'Times New Roman',serif;
transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.gallery-map-medallion:hover,
.floor-medallion:hover{
transform:translateY(-2px);
filter:brightness(1.12);
box-shadow:0 9px 26px #000, 0 0 0 2px rgba(213,169,84,.25);
}
.gallery-map-medallion span{font-size:11px;letter-spacing:1px;}
/* keep the map off the left display and make the floor medallion the preferred way to reveal it */
.mini-map{
right:24px;
left:auto;
bottom:92px;
max-height:56vh;
}
@media (max-width:900px){
:root{--vm-arch-top:185px;--vm-floor-line:120px;}
.gallery-map-medallion,.floor-medallion{display:none;}
}
/* v11 real-room geometry corrections */
.museum { --rear-wall-bottom: 29%; --arch-top: 230px; --arch-bottom: 176px; }
.museum:before { z-index:1; height:30%; clip-path:polygon(18% 0,82% 0,66% 100%,34% 100%); border-bottom:3px solid #8c6732; }
.museum:after { z-index:2; bottom:-24%; height:55%; }
.room-title, .room-card, .wall, .new-arrivals, .kiosk, .floor-medallion, .bench, .walk-controls, .mini-map { z-index:10; }
.center-arch { top:var(--arch-top); bottom:var(--arch-bottom); z-index:6; border-width:18px; border-bottom:0; background:linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.08)); pointer-events:none; }
.center-arch:before { content:''; position:absolute; left:-18px; right:-18px; bottom:-18px; height:18px; background:#21150d; box-shadow:inset 0 0 0 4px #9b7335, 0 6px 12px rgba(0,0,0,.35); }
.arch-plaque { pointer-events:auto; }
.bench { bottom:calc(var(--arch-bottom) + 52px); }
.floor-medallion { z-index:12; bottom:58px; cursor:pointer; }
.floor-medallion:hover { filter:brightness(1.16); box-shadow:0 6px 28px #000, 0 0 18px rgba(217,189,130,.35); }
.wall { top:126px; bottom:96px; box-sizing:border-box; overflow:visible; }
.left-wall { width:37%; padding-left:64px; padding-right:34px; }
.right-wall { width:37%; padding-left:34px; padding-right:64px; }
.fixture { width:100%; box-sizing:border-box; max-height:calc(100vh - 250px); overflow:auto; display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; align-content:start; }
.fixture-title { grid-column:1 / -1; }
.group-bay { display:block; width:auto; min-width:0; margin:0; box-sizing:border-box; }
.fixture-items { display:grid; grid-template-columns:repeat(auto-fit, minmax(74px, 1fr)); gap:6px; align-items:start; }
.item-tile { width:auto; max-width:92px; margin:0 auto; display:block; }
.item-img { height:104px; }
.more-items-note { grid-column:1 / -1; text-align:center; font-size:11px; color:#e0b866; padding:6px; border-top:1px solid rgba(159,118,53,.5); }
@media (min-width:1200px) {
.left-wall, .right-wall { width:39%; }
.fixture { grid-template-columns:repeat(auto-fit, minmax(165px, 1fr)); }
}
@media (min-width:1550px) {
.left-wall, .right-wall { width:40%; }
.fixture { grid-template-columns:repeat(auto-fit, minmax(175px, 1fr)); }
.fixture-items { grid-template-columns:repeat(auto-fit, minmax(78px, 1fr)); }
}
@media (max-width:1150px) {
.left-wall, .right-wall { width:36%; padding-left:30px; padding-right:30px; }
.fixture { grid-template-columns:repeat(auto-fit, minmax(132px, 1fr)); }
.item-img { height:92px; }
}
/* v12 responsive fixture display columns
The alcove displays should use the available wall width like real display cases,
not collapse into one narrow vertical strip. These rules intentionally override
earlier physical-fixture fixed widths. */
.museum[data-stop-kind] .wall .fixture {
display:grid !important;
grid-template-columns:repeat(auto-fill, minmax(138px, 1fr)) !important;
gap:12px !important;
align-items:start !important;
align-content:start !important;
}
.museum[data-stop-kind] .wall .fixture .fixture-title {
grid-column:1 / -1 !important;
}
.museum[data-stop-kind] .wall .fixture .group-bay,
.museum[data-stop-kind] .wall .fixture-wall_case .group-bay,
.museum[data-stop-kind] .wall .fixture-glass_cabinet .group-bay,
.museum[data-stop-kind] .wall .fixture-pegboard .group-bay,
.museum[data-stop-kind] .wall .fixture-gondola_shelf .group-bay,
.museum[data-stop-kind] .wall .fixture-flat_file .group-bay,
.museum[data-stop-kind] .wall .fixture-binder_table .group-bay,
.museum[data-stop-kind] .wall .fixture-pedestal .group-bay {
width:auto !important;
min-width:0 !important;
max-width:none !important;
margin:0 !important;
box-sizing:border-box !important;
}
.museum[data-stop-kind] .wall .fixture .fixture-items,
.museum[data-stop-kind] .wall .fixture-gondola_shelf .fixture-items,
.museum[data-stop-kind] .wall .fixture-pegboard .fixture-items,
.museum[data-stop-kind] .wall .fixture-glass_cabinet .fixture-items,
.museum[data-stop-kind] .wall .fixture-wall_case .fixture-items,
.museum[data-stop-kind] .wall .fixture-flat_file .fixture-items {
display:grid !important;
grid-template-columns:repeat(auto-fill, minmax(58px, 1fr)) !important;
gap:7px !important;
justify-items:center !important;
align-items:start !important;
}
.museum[data-stop-kind] .wall .fixture .item-tile,
.museum[data-stop-kind] .wall .fixture-gondola_shelf .item-tile,
.museum[data-stop-kind] .wall .fixture-pegboard .item-tile,
.museum[data-stop-kind] .wall .fixture-glass_cabinet .item-tile,
.museum[data-stop-kind] .wall .fixture-wall_case .item-tile,
.museum[data-stop-kind] .wall .fixture-flat_file .item-tile {
width:100% !important;
max-width:76px !important;
min-width:0 !important;
margin:0 auto !important;
}
.museum[data-stop-kind] .wall .fixture .item-img { height:92px !important; }
.museum[data-stop-kind] .wall .fixture .item-caption { font-size:10px; line-height:1.1; }
.museum[data-stop-kind] .wall .fixture .item-rec { font-size:9px; }
@media (min-width:1350px) {
.museum[data-stop-kind] .wall .fixture {
grid-template-columns:repeat(auto-fill, minmax(128px, 1fr)) !important;
}
}
@media (min-width:1650px) {
.museum[data-stop-kind] .left-wall,
.museum[data-stop-kind] .right-wall { width:41% !important; }
.museum[data-stop-kind] .wall .fixture {
grid-template-columns:repeat(auto-fill, minmax(122px, 1fr)) !important;
}
.museum[data-stop-kind] .wall .fixture .item-img { height:88px !important; }
}
@media (min-width:2000px) {
.museum[data-stop-kind] .left-wall,
.museum[data-stop-kind] .right-wall { width:42% !important; }
.museum[data-stop-kind] .wall .fixture {
grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)) !important;
}
}
/* v13 realistic entry and responsive display corrections
Based on the approved refined room concept image: entry lobby first, real wall displays,
side navigation panel, narrower archway, no pointless floating bench, and wider item grids. */
/* The entrance should not show future alcove fixtures. It is a lobby with entry case + instructions. */
.museum[data-stop-kind="entrance"] .left-wall,
.museum[data-stop-kind="entrance"] .right-wall {
top:150px;
bottom:150px;
width:30%;
padding:0;
overflow:visible;
}
.museum[data-stop-kind="entrance"] .left-wall {
left:92px;
transform:perspective(850px) rotateY(10deg) skewY(0deg) !important;
}
.museum[data-stop-kind="entrance"] .right-wall {
right:120px;
transform:perspective(850px) rotateY(-10deg) skewY(0deg) !important;
}
.entry-wall-panel {
display:none; /* keep the entrance clean; New Arrivals case is the visible entry feature */
}
.museum[data-stop-kind="entrance"] .right-wall { display:none; }
/* Dedicated right-side instruction/search panel in the entry room. */
.navigation-instructions {
position:absolute;
right:30px;
top:190px;
width:250px;
z-index:15;
display:none;
box-sizing:border-box;
padding:20px 18px;
background:linear-gradient(#16120d,#090807);
border:2px solid #9f7635;
box-shadow:0 10px 25px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,220,150,.08);
color:#f0d29a;
font-family:Arial,Helvetica,sans-serif;
}
.navigation-instructions h3 {
margin:0 0 14px;
color:#e0b866;
font-size:14px;
letter-spacing:1px;
text-align:left;
}
.navigation-instructions hr {
border:0;
border-top:1px solid rgba(159,118,53,.65);
margin:16px 0;
}
.navigation-instructions p {
margin:0;
color:#dfcfaf;
font-size:12px;
line-height:1.5;
}
.nav-help-row {
display:grid;
grid-template-columns:28px 28px 1fr;
gap:7px;
align-items:center;
margin:10px 0;
font-size:12px;
color:#dfcfaf;
}
.nav-help-row kbd {
display:inline-flex;
align-items:center;
justify-content:center;
height:26px;
border:1px solid #9f7635;
border-radius:3px;
color:#e0b866;
background:#100d0a;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
}
.nav-help-row strong { color:#f4ead6; font-size:12px; }
/* Remove the useless floating brown block in the doorway. */
.bench { display:none !important; }
/* Narrower doorway / wider usable side-display space. */
.center-arch {
left:42% !important;
right:42% !important;
top:178px !important;
bottom:154px !important;
border-width:14px !important;
border-bottom:0 !important;
z-index:6 !important;
}
.center-arch:before { display:none !important; }
.room-title { top:18px; }
/* Give real alcove displays more of the browser width. */
.museum[data-stop-kind="alcove"] .left-wall,
.museum[data-stop-kind="alcove"] .right-wall {
top:146px !important;
bottom:88px !important;
width:42% !important;
overflow:visible !important;
}
.museum[data-stop-kind="alcove"] .left-wall {
left:20px !important;
padding-left:44px !important;
padding-right:12px !important;
transform:perspective(900px) rotateY(8deg) skewY(0deg) !important;
}
.museum[data-stop-kind="alcove"] .right-wall {
right:20px !important;
padding-left:12px !important;
padding-right:44px !important;
transform:perspective(900px) rotateY(-8deg) skewY(0deg) !important;
}
/* Real fixture cabinet: one big wall unit; group sections use full width; items use calculated columns. */
.museum[data-stop-kind="alcove"] .wall .fixture {
display:block !important;
width:100% !important;
min-height:430px !important;
max-height:calc(100vh - 265px) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
padding:16px 18px 42px !important;
box-sizing:border-box !important;
background:linear-gradient(90deg,#1c120b,#3c2818,#1a1009) !important;
border:3px solid #8f672f !important;
box-shadow:0 12px 24px rgba(0,0,0,.75), inset 0 0 0 2px rgba(255,225,160,.07) !important;
}
.museum[data-stop-kind="alcove"] .fixture-title {
display:block !important;
grid-column:auto !important;
margin:0 0 14px !important;
padding:0 0 12px !important;
font-size:28px !important;
}
.museum[data-stop-kind="alcove"] .fixture-title em {
display:block;
margin-top:3px;
font-family:Arial,Helvetica,sans-serif;
font-style:normal;
font-size:10px;
color:#b9965c;
letter-spacing:2px;
}
.museum[data-stop-kind="alcove"] .group-bay,
.museum[data-stop-kind="alcove"] .fixture .group-bay,
.museum[data-stop-kind="alcove"] .fixture-gondola_shelf .group-bay,
.museum[data-stop-kind="alcove"] .fixture-pegboard .group-bay,
.museum[data-stop-kind="alcove"] .fixture-glass_cabinet .group-bay,
.museum[data-stop-kind="alcove"] .fixture-wall_case .group-bay,
.museum[data-stop-kind="alcove"] .fixture-flat_file .group-bay {
display:block !important;
width:100% !important;
max-width:none !important;
min-width:0 !important;
max-height:none !important;
overflow:visible !important;
margin:0 0 14px !important;
padding:10px !important;
box-sizing:border-box !important;
background:rgba(10,7,5,.58) !important;
}
.museum[data-stop-kind="alcove"] .fixture-items {
display:grid !important;
grid-template-columns:repeat(3, minmax(72px, 92px));
justify-content:start !important;
align-items:start !important;
gap:10px 12px !important;
max-height:none !important;
overflow:visible !important;
}
.museum[data-stop-kind="alcove"] .item-tile {
width:100% !important;
max-width:92px !important;
min-width:72px !important;
margin:0 !important;
}
.museum[data-stop-kind="alcove"] .item-img { height:110px !important; }
/* If the screen is wide, use it: more columns, less scrolling. */
@media (min-width:1500px) {
.museum[data-stop-kind="alcove"] .left-wall,
.museum[data-stop-kind="alcove"] .right-wall { width:43% !important; }
.museum[data-stop-kind="alcove"] .fixture-items { grid-template-columns:repeat(4, minmax(72px, 92px)) !important; }
}
@media (min-width:1850px) {
.museum[data-stop-kind="alcove"] .left-wall,
.museum[data-stop-kind="alcove"] .right-wall { width:44% !important; }
.museum[data-stop-kind="alcove"] .fixture-items { grid-template-columns:repeat(5, minmax(72px, 92px)) !important; }
}
@media (min-width:2200px) {
.museum[data-stop-kind="alcove"] .fixture-items { grid-template-columns:repeat(6, minmax(72px, 92px)) !important; }
}
/* Entrance new-arrivals case should feel intentional, not like a blocking overlay. */
.museum[data-stop-kind="entrance"] .new-arrivals {
left:88px !important;
bottom:96px !important;
width:390px !important;
z-index:14 !important;
}
@media (max-width:1050px) {
.navigation-instructions { display:none !important; }
.center-arch { left:37% !important; right:37% !important; }
.museum[data-stop-kind="alcove"] .left-wall,
.museum[data-stop-kind="alcove"] .right-wall { width:39% !important; }
.museum[data-stop-kind="alcove"] .fixture-items { grid-template-columns:repeat(2, minmax(68px, 86px)) !important; }
}
/* v14 Mockup-Matched Room View
Goal: make the browser view behave like the approved visual mockup instead of like stacked web panels.
- Physical wall cabinets, not scrolling columns.
- Cabinet pages show multiple item columns based on browser width.
- Pager arrows move through fixture contents instead of allowing items to disappear below the floor.
- Entrance remains a clean lobby/instruction view.
*/
/* More realistic room shell matching approved concept proportions */
.museum {
background:
radial-gradient(circle at 50% 32%, rgba(255,222,160,.16), transparent 24%),
linear-gradient(180deg,#4b3728 0%,#2d2119 33%,#4c3e31 72%,#19130f 100%) !important;
}
.museum:before {
height:210px !important;
background:
repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0, rgba(255,255,255,.045) 2px, transparent 2px, transparent 130px),
linear-gradient(#6f5540,#3a2b21) !important;
clip-path:polygon(20% 0,80% 0,64% 100%,36% 100%) !important;
z-index:1 !important;
}
.museum:after {
z-index:2 !important;
bottom:-26% !important;
height:58% !important;
background:
repeating-linear-gradient(90deg, rgba(0,0,0,.20) 0 2px, transparent 2px 118px),
repeating-linear-gradient(0deg, rgba(0,0,0,.17) 0 2px, transparent 2px 88px),
linear-gradient(#95886f,#3d3329) !important;
}
.room-title {
width:510px !important;
margin-left:-255px !important;
top:28px !important;
padding:14px 22px 12px !important;
z-index:18 !important;
}
.room-title h1 { font-size:38px !important; line-height:1.08 !important; }
.room-number { bottom:-36px !important; }
/* Proper doorway: narrower, not a big wall-eating oval, and not layered over floor. */
.center-arch {
left:43% !important;
right:43% !important;
top:188px !important;
bottom:166px !important;
z-index:5 !important;
border:14px solid #1c130d !important;
border-bottom:0 !important;
border-radius:90px 90px 0 0 !important;
background:linear-gradient(180deg, rgba(15,10,7,.15), rgba(0,0,0,.07)) !important;
box-shadow:inset 0 0 0 3px #9f7635, 0 0 28px rgba(0,0,0,.75) !important;
}
.center-arch .arch-plaque {
position:absolute;
left:50%; top:42%; transform:translate(-50%,-50%);
width:230px;
background:#100d0a;
border:1px solid #9f7635;
box-shadow:0 8px 18px #000;
padding:12px;
text-align:center;
}
.center-arch .arch-plaque strong { display:block; color:#e9c980; font-size:16px; letter-spacing:1px; text-transform:uppercase; }
.center-arch .arch-plaque span { display:block; margin-top:4px; font-family:Arial,Helvetica,sans-serif; font-size:11px; color:#dec89f; }
/* Hide meaningless central bench permanently. */
.bench { display:none !important; }
/* Entry room: no alcove fixtures in the lobby, plus clear right instruction panel. */
.museum[data-stop-kind="entrance"] .left-wall,
.museum[data-stop-kind="entrance"] .right-wall { display:none !important; }
.museum[data-stop-kind="entrance"] .new-arrivals {
left:96px !important;
bottom:96px !important;
width:410px !important;
z-index:15 !important;
transform:perspective(800px) rotateY(4deg);
}
.museum[data-stop-kind="entrance"] .navigation-instructions {
display:block !important;
right:92px !important;
top:205px !important;
width:285px !important;
}
/* Alcove view: physical left/right cases, larger and more like the mockup. */
.museum[data-stop-kind="alcove"] .navigation-instructions,
.museum[data-stop-kind="alcove"] .new-arrivals,
.museum[data-stop-kind="alcove"] .kiosk { display:none !important; }
.museum[data-stop-kind="alcove"] .left-wall,
.museum[data-stop-kind="alcove"] .right-wall {
top:150px !important;
bottom:92px !important;
width:40.5% !important;
padding:0 !important;
overflow:visible !important;
z-index:12 !important;
}
.museum[data-stop-kind="alcove"] .left-wall {
left:82px !important;
transform:perspective(1100px) rotateY(9deg) !important;
transform-origin:left center !important;
}
.museum[data-stop-kind="alcove"] .right-wall {
right:82px !important;
transform:perspective(1100px) rotateY(-9deg) !important;
transform-origin:right center !important;
}
/* Main cabinet body: one cabinet per manufacturer, not multiple stacked windows. */
.museum[data-stop-kind="alcove"] .mockup-cabinet {
display:flex !important;
flex-direction:column !important;
height:100% !important;
min-height:0 !important;
max-height:none !important;
overflow:hidden !important;
box-sizing:border-box !important;
padding:18px 22px 18px !important;
background:linear-gradient(90deg,#17100a,#332215 50%,#130d08) !important;
border:5px solid #21150d !important;
box-shadow:
0 0 0 2px #9f7635,
0 18px 28px rgba(0,0,0,.70),
inset 0 0 0 2px rgba(255,225,160,.08) !important;
}
.museum[data-stop-kind="alcove"] .mockup-cabinet:before {
content:'';
position:absolute;
left:18px; right:18px; top:58px;
height:1px;
background:#9f7635;
opacity:.7;
}
.museum[data-stop-kind="alcove"] .fixture-title {
flex:0 0 auto !important;
display:block !important;
margin:0 0 8px !important;
padding:0 0 10px !important;
border-bottom:0 !important;
text-align:center !important;
font-size:27px !important;
line-height:1.04 !important;
color:#ead19a !important;
text-shadow:0 2px 0 #000 !important;
max-height:68px;
overflow:hidden;
}
.museum[data-stop-kind="alcove"] .fixture-title span { display:block; }
.museum[data-stop-kind="alcove"] .fixture-title em {
display:block !important;
margin-top:4px !important;
font-family:Arial,Helvetica,sans-serif !important;
font-style:normal !important;
font-size:10px !important;
letter-spacing:2px !important;
color:#ad8b51 !important;
}
.fixture-group-summary {
flex:0 0 auto;
margin:2px 0 10px;
text-align:center;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
color:#d9c398;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.fixture-page { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
/* The actual display grid: browser width decides how many visible columns fit. */
.fixture-item-grid {
flex:1 1 auto;
min-height:0;
display:grid !important;
grid-template-columns:repeat(4, minmax(84px, 1fr)) !important;
grid-auto-rows:minmax(128px, auto);
gap:12px 14px !important;
align-content:start !important;
justify-items:center !important;
padding:14px !important;
background:rgba(10,7,5,.72);
border:2px solid #8f672f;
box-shadow:inset 0 0 24px rgba(0,0,0,.88);
overflow:hidden !important;
}
.fixture-item-grid .item-tile {
width:100% !important;
max-width:105px !important;
margin:0 !important;
display:block !important;
}
.fixture-item-grid .item-img {
height:112px !important;
background:#f1eee6 !important;
border:4px solid #291b10 !important;
box-shadow:0 0 0 1px #c99b50, 0 4px 10px rgba(0,0,0,.45) !important;
}
.fixture-item-grid .item-caption { height:26px !important; font-size:10px !important; line-height:1.15 !important; margin-top:3px !important; }
.fixture-item-grid .item-rec { font-size:9px !important; }
.fixture-pager {
flex:0 0 auto;
display:grid;
grid-template-columns:42px 1fr 42px;
gap:8px;
align-items:center;
margin-top:10px;
padding:7px 10px;
background:#110b07;
border:1px solid #745225;
color:#d9bd82;
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
text-align:center;
}
.fixture-pager button {
height:28px;
background:#120d08;
color:#e0b866;
border:1px solid #8c6732;
cursor:pointer;
font-size:18px;
line-height:1;
}
.fixture-pager button:hover { background:#21160d; }
@media (min-width:1500px) {
.museum[data-stop-kind="alcove"] .left-wall,
.museum[data-stop-kind="alcove"] .right-wall { width:41.5% !important; }
.fixture-item-grid { grid-template-columns:repeat(4, minmax(92px, 1fr)) !important; }
}
@media (min-width:1750px) {
.museum[data-stop-kind="alcove"] .left-wall,
.museum[data-stop-kind="alcove"] .right-wall { width:42.5% !important; }
.fixture-item-grid { grid-template-columns:repeat(5, minmax(86px, 1fr)) !important; }
}
@media (min-width:2100px) {
.fixture-item-grid { grid-template-columns:repeat(6, minmax(82px, 1fr)) !important; }
}
@media (max-width:1250px) {
.museum[data-stop-kind="alcove"] .left-wall { left:52px !important; }
.museum[data-stop-kind="alcove"] .right-wall { right:52px !important; }
.fixture-item-grid { grid-template-columns:repeat(3, minmax(78px, 1fr)) !important; gap:9px !important; }
.fixture-item-grid .item-img { height:96px !important; }
}
/* Floor map medallion in the approved mockup style. */
.gallery-map-medallion {
bottom:50px !important;
width:260px !important;
height:116px !important;
margin-left:-130px !important;
z-index:16 !important;
background:radial-gradient(#222,#090807) !important;
color:#d9bd82 !important;
border-color:#a57b37 !important;
box-shadow:0 12px 26px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,220,150,.14) !important;
}
.gallery-map-medallion span { color:#e9d3a8 !important; }
/* Keep walk controls from fighting the map medallion visually. */
.walk-controls {
bottom:18px !important;
z-index:19 !important;
}
.walk-controls .walk-status { opacity:.95; }
/* v15 Mockup-closer visual pass
- About panel appears only in the entry room (JS toggles it).
- Cabinets no longer collide with the arch/plaque.
- Doorway contains a visible "through the door" corridor with floor and ceiling depth.
- Lighting, crown molding, side sconces, and floor perspective better match the approved mockup.
- Floor medallion is a graphic-like Gallery Map button, not a text oval. */
/* richer, cleaner gallery shell */
.museum {
background:
radial-gradient(circle at 31% 10%, rgba(255,231,178,.20) 0 18px, transparent 20px),
radial-gradient(circle at 69% 10%, rgba(255,231,178,.20) 0 18px, transparent 20px),
radial-gradient(circle at 50% 18%, rgba(255,224,160,.16), transparent 23%),
linear-gradient(180deg,#5a4434 0%,#3f3026 31%,#3d3027 66%,#1a1512 100%) !important;
}
/* ceiling plane with subtle panels; keep it above the arch opening, not over it */
.museum:before {
height:210px !important;
z-index:1 !important;
background:
radial-gradient(ellipse at 31% 20%, rgba(255,231,178,.65) 0 5px, rgba(255,231,178,.22) 6px 18px, transparent 20px),
radial-gradient(ellipse at 69% 20%, rgba(255,231,178,.65) 0 5px, rgba(255,231,178,.22) 6px 18px, transparent 20px),
repeating-linear-gradient(90deg, rgba(255,255,255,.050) 0, rgba(255,255,255,.050) 2px, transparent 2px, transparent 132px),
linear-gradient(#705844,#3b2d23) !important;
clip-path:polygon(22% 0,78% 0,66% 100%,34% 100%) !important;
border-bottom:3px solid #8c6732 !important;
}
/* floor with stronger one-point perspective and warm center lighting */
.museum:after {
z-index:2 !important;
bottom:-25% !important;
height:60% !important;
background:
linear-gradient(90deg, transparent 0 49.8%, rgba(255,226,170,.14) 50%, transparent 50.2%),
repeating-linear-gradient(90deg, rgba(0,0,0,.24) 0 2px, transparent 2px 118px),
repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 88px),
radial-gradient(ellipse at 50% 16%, rgba(255,224,156,.18), transparent 48%),
linear-gradient(#9a8d76,#3e342a) !important;
}
/* cleaner title scale from the mockup */
.room-title {
top:26px !important;
width:500px !important;
margin-left:-250px !important;
z-index:18 !important;
}
.room-title h1 { font-size:36px !important; line-height:1.08 !important; }
/* the actual doorway / corridor */
.center-arch {
left:39.8% !important;
right:39.8% !important;
top:184px !important;
bottom:150px !important;
z-index:8 !important;
overflow:visible !important;
border:18px solid #18110b !important;
border-bottom:0 !important;
border-radius:118px 118px 0 0 !important;
background:
linear-gradient(180deg,rgba(255,255,255,.04),transparent 24%),
linear-gradient(#1b130d,#0b0705) !important;
box-shadow:
inset 0 0 0 4px #9f7635,
inset 0 -50px 70px rgba(255,225,160,.10),
0 0 32px rgba(0,0,0,.86) !important;
pointer-events:none;
}
/* visible corridor beyond the doorway, including its own ceiling/floor lighting */
.center-arch:after {
content:'' !important;
position:absolute !important;
left:18px !important;
right:18px !important;
top:48px !important;
bottom:0 !important;
z-index:0 !important;
border-left:10px solid rgba(10,7,5,.82);
border-right:10px solid rgba(10,7,5,.82);
background:
radial-gradient(circle at 50% 15%, rgba(255,230,178,.65) 0 5px, rgba(255,230,178,.25) 6px 18px, transparent 20px),
radial-gradient(circle at 50% 34%, rgba(255,230,178,.45) 0 4px, rgba(255,230,178,.16) 5px 14px, transparent 16px),
linear-gradient(90deg, rgba(0,0,0,.52), transparent 18%, transparent 82%, rgba(0,0,0,.52)),
repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0 2px, transparent 2px 70px),
linear-gradient(180deg,#504034 0%,#2c231d 44%,#80735f 45%,#40362e 100%) !important;
clip-path:polygon(16% 0,84% 0,100% 100%,0 100%);
box-shadow:inset 0 0 28px rgba(0,0,0,.72);
}
/* sign centered and legible in the doorway, above the corridor image */
.center-arch .arch-plaque {
position:absolute !important;
left:50% !important;
top:48% !important;
transform:translate(-50%,-50%) !important;
width:220px !important;
max-width:82% !important;
margin:0 !important;
z-index:3 !important;
background:rgba(9,7,5,.94) !important;
border:1px solid #a57b37 !important;
box-shadow:0 8px 22px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,225,160,.08) !important;
padding:13px 14px !important;
text-align:center !important;
}
.center-arch .arch-plaque strong {
font-size:16px !important;
color:#f0cf87 !important;
letter-spacing:1px !important;
}
.center-arch .arch-plaque span {
font-size:11px !important;
color:#e2cca3 !important;
line-height:1.35 !important;
}
/* sconce lights beside the arch */
.center-arch:before {
content:'' !important;
display:block !important;
position:absolute !important;
left:-74px !important;
top:43% !important;
width:16px !important;
height:70px !important;
border-radius:16px !important;
background:linear-gradient(#ffe1a5,#80542a) !important;
box-shadow:
calc(100% + 132px) 0 0 0 #8b5a2e,
0 0 22px rgba(255,216,145,.55),
calc(100% + 132px) 0 22px 0 rgba(255,216,145,.55) !important;
z-index:2 !important;
}
/* keep cabinet faces at mockup proportions and clear of arch */
.museum[data-stop-kind="alcove"] .left-wall,
.museum[data-stop-kind="alcove"] .right-wall {
top:155px !important;
bottom:102px !important;
width:33.7% !important;
overflow:visible !important;
z-index:12 !important;
}
.museum[data-stop-kind="alcove"] .left-wall {
left:86px !important;
padding:0 !important;
transform:perspective(1200px) rotateY(7deg) !important;
transform-origin:left center !important;
}
.museum[data-stop-kind="alcove"] .right-wall {
right:86px !important;
padding:0 !important;
transform:perspective(1200px) rotateY(-7deg) !important;
transform-origin:right center !important;
}
/* Dense cabinet grid like the mockup: 4 across on normal desktop */
.museum[data-stop-kind="alcove"] .mockup-cabinet {
height:100% !important;
padding:18px 22px 18px !important;
overflow:hidden !important;
}
.fixture-item-grid {
grid-template-columns:repeat(4, minmax(78px, 1fr)) !important;
grid-auto-rows:minmax(126px, auto) !important;
gap:11px 13px !important;
}
.fixture-item-grid .item-img { height:108px !important; }
.fixture-item-grid .item-tile { max-width:98px !important; }
/* Make room-card entry-only visually explicit; JS controls display. */
.room-card { z-index:22 !important; }
/* Gallery map medallion rebuilt as a graphic-style button */
.gallery-map-medallion {
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
gap:3px !important;
bottom:48px !important;
width:260px !important;
height:116px !important;
margin-left:-130px !important;
padding:0 !important;
z-index:16 !important;
background:
radial-gradient(ellipse at 50% 42%, #222 0%, #0c0a08 66%, #050404 100%) !important;
color:#d9bd82 !important;
border:2px solid #a57b37 !important;
box-shadow:0 14px 28px rgba(0,0,0,.70), inset 0 0 0 1px rgba(255,220,150,.16) !important;
text-shadow:0 1px 0 #000;
}
.gallery-map-medallion .map-icon {
width:34px;
height:28px;
display:block;
position:relative;
margin-bottom:2px;
}
.gallery-map-medallion .map-icon:before {
content:'';
position:absolute;
inset:0;
background:
linear-gradient(90deg, transparent 0 30%, #d9bd82 31% 36%, transparent 37% 63%, #d9bd82 64% 69%, transparent 70%),
linear-gradient(145deg, transparent 0 12%, #d9bd82 13% 18%, transparent 19% 45%, #d9bd82 46% 51%, transparent 52% 78%, #d9bd82 79% 84%, transparent 85%),
linear-gradient(#d9bd82,#d9bd82);
clip-path:polygon(0 7%,28% 0,55% 8%,82% 0,100% 7%,100% 93%,82% 100%,55% 92%,28% 100%,0 93%);
opacity:.98;
}
.gallery-map-medallion strong {
display:block;
color:#d9bd82;
font-size:21px;
letter-spacing:2px;
}
.gallery-map-medallion em {
display:block;
color:#f0debd;
font-style:normal;
font-size:12px;
letter-spacing:.4px;
}
/* Navigation panel matches the mockup side placard */
.navigation-instructions {
background:linear-gradient(#18120d,#090807) !important;
border:2px solid #a57b37 !important;
box-shadow:0 12px 28px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,225,160,.10) !important;
}
/* About panel only in entry; hide explicitly on non-entry even if JS is late. */
.museum:not([data-stop-kind="entrance"]) .room-card { display:none !important; }
@media (min-width:1600px) {
.museum[data-stop-kind="alcove"] .left-wall,
.museum[data-stop-kind="alcove"] .right-wall { width:34.7% !important; }
.fixture-item-grid { grid-template-columns:repeat(4, minmax(86px, 1fr)) !important; }
}
@media (min-width:1900px) {
.museum[data-stop-kind="alcove"] .left-wall,
.museum[data-stop-kind="alcove"] .right-wall { width:35.5% !important; }
.fixture-item-grid { grid-template-columns:repeat(5, minmax(78px, 1fr)) !important; }
}
@media (max-width:1300px) {
.center-arch { left:38% !important; right:38% !important; }
.museum[data-stop-kind="alcove"] .left-wall { left:52px !important; width:34.5% !important; }
.museum[data-stop-kind="alcove"] .right-wall { right:52px !important; width:34.5% !important; }
.fixture-item-grid { grid-template-columns:repeat(3, minmax(72px, 1fr)) !important; }
.fixture-item-grid .item-img { height:96px !important; }
}
@media (max-width:1050px) {
.center-arch { left:36% !important; right:36% !important; }
.museum[data-stop-kind="alcove"] .left-wall,
.museum[data-stop-kind="alcove"] .right-wall { width:37% !important; }
}
/* v17 Restore collectible displays + stronger through-door gallery view
Built from v15, not the broken v16 pass.
- Restores normal fixture item rendering.
- Makes the doorway a visible lit corridor instead of a black void.
- Keeps the alcove sign centered/readable.
- Opens the Gallery Map in front of all fixtures.
- About This Room remains entry-only.
*/
/* hard guarantee: About panel only on entry stop */
.museum:not([data-stop-kind="entrance"]) #roomCard,
.museum:not([data-stop-kind="entrance"]) .room-card { display:none !important; }
.museum[data-stop-kind="entrance"] #roomCard,
.museum[data-stop-kind="entrance"] .room-card { display:block !important; }
/* Make gallery map usable: in front of all fixtures, centered like a real floor-plan pop-up. */
.mini-map:not(.collapsed) {
position:fixed !important;
left:50% !important;
right:auto !important;
top:50% !important;
bottom:auto !important;
width:min(760px, 88vw) !important;
max-height:76vh !important;
transform:translate(-50%, -50%) !important;
z-index:50000 !important;
overflow:auto !important;
padding:22px !important;
background:linear-gradient(#15110d,#080706) !important;
border:2px solid #b38642 !important;
box-shadow:0 24px 80px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,224,160,.12) !important;
}
.mini-map:not(.collapsed)::before {
content:'GALLERY MAP';
display:block;
text-align:center;
color:#e8c881;
font-family:Georgia,'Times New Roman',serif;
font-size:28px;
letter-spacing:2px;
margin:0 0 14px;
}
.mini-map:not(.collapsed) h3 { display:none !important; }
.mini-map:not(.collapsed) #miniMapPath {
display:grid !important;
grid-template-columns:repeat(auto-fill, minmax(58px, 1fr)) !important;
gap:18px 14px !important;
}
.mini-map:not(.collapsed) .map-stop {
width:48px !important;
height:48px !important;
margin:0 auto 12px !important;
}
.overlay-panel { z-index:60000 !important; }
/* Correct the doorway priority: show a lit corridor through the arch. */
.center-arch {
left:39.5% !important;
right:39.5% !important;
top:178px !important;
bottom:132px !important;
z-index:8 !important;
overflow:hidden !important;
border:18px solid #17100b !important;
border-bottom:0 !important;
border-radius:118px 118px 0 0 !important;
background:
linear-gradient(90deg, rgba(0,0,0,.74) 0 8%, transparent 18% 82%, rgba(0,0,0,.74) 92% 100%),
linear-gradient(180deg,#4a382c 0%,#33271f 42%,#8a7c67 43%,#44372d 100%) !important;
box-shadow:inset 0 0 0 4px #a77a37, 0 0 34px rgba(0,0,0,.9) !important;
pointer-events:none !important;
}
/* corridor side walls, ceiling lights, and perspective floor visible inside the doorway */
.center-arch::after {
content:'' !important;
position:absolute !important;
left:18px !important;
right:18px !important;
top:48px !important;
bottom:0 !important;
z-index:0 !important;
background:
radial-gradient(circle at 50% 10%, rgba(255,230,174,.72) 0 5px, rgba(255,230,174,.25) 6px 18px, transparent 20px),
radial-gradient(circle at 50% 31%, rgba(255,230,174,.44) 0 4px, rgba(255,230,174,.15) 5px 14px, transparent 16px),
linear-gradient(90deg, rgba(0,0,0,.56), transparent 20%, transparent 80%, rgba(0,0,0,.56)),
repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 2px, transparent 2px 54px),
repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 2px, transparent 2px 62px),
linear-gradient(180deg,#544338 0%,#2f261f 44%,#958873 45%,#453a31 100%) !important;
clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);
box-shadow:inset 0 0 34px rgba(0,0,0,.76) !important;
}
/* arch sconces outside the door, similar to the approved mockup */
.center-arch::before {
content:'' !important;
display:block !important;
position:absolute !important;
left:-78px !important;
top:44% !important;
width:16px !important;
height:70px !important;
border-radius:16px !important;
background:linear-gradient(#ffe1a5,#86592c) !important;
box-shadow:
0 0 24px rgba(255,216,145,.60),
156px 0 0 0 #86592c,
156px 0 24px 0 rgba(255,216,145,.60) !important;
z-index:2 !important;
}
/* keep alcove sign centered and readable in front of the corridor */
.center-arch .arch-plaque {
position:absolute !important;
left:50% !important;
top:50% !important;
transform:translate(-50%, -50%) !important;
width:230px !important;
max-width:82% !important;
margin:0 !important;
z-index:4 !important;
background:rgba(9,7,5,.95) !important;
border:1px solid #b38642 !important;
box-shadow:0 10px 26px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,225,160,.09) !important;
padding:13px 14px !important;
text-align:center !important;
pointer-events:auto !important;
}
.center-arch .arch-plaque strong {
display:block !important;
color:#f0cf87 !important;
font-size:16px !important;
line-height:1.15 !important;
letter-spacing:1px !important;
}
.center-arch .arch-plaque span {
display:block !important;
margin-top:4px !important;
color:#e2cca3 !important;
font-family:Arial,Helvetica,sans-serif !important;
font-size:11px !important;
line-height:1.35 !important;
}
/* Restore / protect fixture item displays from the failed black-doorway v16 pass. */
.museum[data-stop-kind="alcove"] .mockup-cabinet {
display:flex !important;
flex-direction:column !important;
height:100% !important;
overflow:hidden !important;
background:linear-gradient(90deg,#17100a,#332215 50%,#130d08) !important;
}
.museum[data-stop-kind="alcove"] .fixture-page { flex:1 1 auto !important; min-height:0 !important; display:flex !important; flex-direction:column !important; }
.museum[data-stop-kind="alcove"] .fixture-item-grid {
flex:1 1 auto !important;
display:grid !important;
grid-template-columns:repeat(4, minmax(78px, 1fr)) !important;
grid-auto-rows:minmax(126px, auto) !important;
gap:11px 13px !important;
align-content:start !important;
justify-items:center !important;
overflow:hidden !important;
background:rgba(10,7,5,.72) !important;
border:2px solid #8f672f !important;
padding:14px !important;
}
.museum[data-stop-kind="alcove"] .fixture-item-grid .item-tile { display:block !important; visibility:visible !important; opacity:1 !important; width:100% !important; max-width:98px !important; }
.museum[data-stop-kind="alcove"] .fixture-item-grid .item-img { display:flex !important; visibility:visible !important; opacity:1 !important; height:108px !important; background:#f1eee6 !important; }
.museum[data-stop-kind="alcove"] .fixture-pager { flex:0 0 auto !important; margin-top:10px !important; }
@media (min-width:1750px) {
.museum[data-stop-kind="alcove"] .fixture-item-grid { grid-template-columns:repeat(5, minmax(78px, 1fr)) !important; }
}
@media (min-width:2100px) {
.museum[data-stop-kind="alcove"] .fixture-item-grid { grid-template-columns:repeat(6, minmax(76px, 1fr)) !important; }
}
/* v18: true doorway-depth effect and mockup-aligned central corridor.
These final overrides intentionally sit at the end of the stylesheet so they win over earlier MVP rules. */
.museum {
background:
radial-gradient(circle at 28% 14%, rgba(255,232,178,.16), transparent 5%),
radial-gradient(circle at 72% 14%, rgba(255,232,178,.16), transparent 5%),
linear-gradient(90deg, rgba(0,0,0,.22) 0 17%, transparent 17% 83%, rgba(0,0,0,.22) 83% 100%),
linear-gradient(180deg,#5a4230 0%,#3c2b20 35%,#70604f 74%,#1b1511 100%) !important;
}
.museum:before {
height:31% !important;
background:
radial-gradient(ellipse at 28% 36%, rgba(255,236,180,.34) 0 2%, transparent 3%),
radial-gradient(ellipse at 72% 36%, rgba(255,236,180,.34) 0 2%, transparent 3%),
repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0, rgba(255,255,255,.055) 2px, transparent 2px, transparent 116px),
linear-gradient(#72583f,#3e2f24) !important;
clip-path:polygon(19% 0,81% 0,65% 100%,35% 100%) !important;
border-bottom:2px solid #9a7038 !important;
z-index:1 !important;
}
.museum:after {
background:
radial-gradient(ellipse at 50% 14%, rgba(255,228,170,.28), transparent 16%),
repeating-linear-gradient(90deg, rgba(0,0,0,.20) 0 2px, transparent 2px 112px),
repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 84px),
linear-gradient(#9a8a73,#4d4134) !important;
z-index:1 !important;
}
.center-arch {
top:185px !important;
left:39.2% !important;
right:39.2% !important;
bottom:168px !important;
z-index:5 !important;
pointer-events:none !important;
overflow:hidden !important;
box-sizing:border-box !important;
border:0 !important;
border-radius:126px 126px 0 0 !important;
background:transparent !important;
box-shadow:none !important;
}
/* Outer stone/wood arch frame */
.center-arch::before {
display:block !important;
content:'' !important;
position:absolute !important;
inset:0 !important;
border-radius:126px 126px 0 0 !important;
border:24px solid #1f1712 !important;
border-bottom:0 !important;
box-shadow:
inset 0 0 0 4px #9f783c,
inset 0 0 0 9px rgba(0,0,0,.55),
0 12px 26px rgba(0,0,0,.65) !important;
z-index:4 !important;
pointer-events:none !important;
}
/* No solid block under the arch; let the room floor continue visually to the doorway. */
.center-arch::after { display:none !important; }
.doorway-depth {
position:absolute;
left:25px;
right:25px;
top:25px;
bottom:0;
overflow:hidden;
border-radius:102px 102px 0 0;
background:
linear-gradient(90deg, rgba(0,0,0,.62) 0 9%, transparent 13% 87%, rgba(0,0,0,.62) 91% 100%),
radial-gradient(ellipse at 50% 7%, rgba(255,224,160,.16), transparent 16%),
linear-gradient(180deg,#53402f 0%, #33261d 31%, #1b1511 32%, #251d17 100%);
box-shadow:inset 0 0 22px rgba(0,0,0,.84), inset 0 0 0 2px rgba(159,120,60,.35);
z-index:2;
}
/* Receding corridor ceiling */
.doorway-depth::before {
content:'';
position:absolute;
left:13%;
right:13%;
top:0;
height:39%;
background:
radial-gradient(ellipse at 50% 18%, rgba(255,235,180,.60) 0 3%, transparent 4%),
radial-gradient(ellipse at 50% 54%, rgba(255,235,180,.40) 0 2%, transparent 3%),
linear-gradient(90deg, rgba(0,0,0,.32), transparent 24% 76%, rgba(0,0,0,.32)),
repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 58px),
linear-gradient(#604832,#2b2018);
clip-path:polygon(0 0,100% 0,77% 100%,23% 100%);
border-bottom:2px solid rgba(151,111,52,.75);
z-index:1;
}
/* Receding corridor floor with cross-lit perspective grid */
.doorway-depth::after {
content:'';
position:absolute;
left:-16%;
right:-16%;
bottom:-12%;
height:62%;
transform:perspective(440px) rotateX(58deg);
transform-origin:bottom center;
background:
radial-gradient(ellipse at 50% 0%, rgba(255,224,162,.32), transparent 28%),
linear-gradient(90deg, transparent 0 49.4%, rgba(245,216,159,.38) 49.4% 50.6%, transparent 50.6% 100%),
repeating-linear-gradient(90deg, rgba(0,0,0,.26) 0 2px, transparent 2px 62px),
repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 2px, transparent 2px 54px),
linear-gradient(#93836e,#3f342b);
z-index:1;
}
.inner-door-frame {
position:absolute;
left:22%;
right:22%;
top:22%;
bottom:22%;
border:7px solid rgba(24,17,13,.92);
border-bottom:0;
border-radius:72px 72px 0 0;
box-shadow:inset 0 0 0 2px rgba(151,111,52,.7), 0 0 0 2px rgba(0,0,0,.35);
z-index:3;
}
.inner-door-frame::before,
.inner-door-frame::after {
content:'';
position:absolute;
top:25%;
bottom:0;
width:10px;
background:linear-gradient(#140f0c,#2e2219,#100b08);
box-shadow:0 0 0 1px rgba(151,111,52,.45);
}
.inner-door-frame::before { left:-28px; }
.inner-door-frame::after { right:-28px; }
.doorway-floor-lines {
position:absolute;
left:22%;
right:22%;
bottom:0;
height:46%;
z-index:2;
background:
linear-gradient(90deg, transparent 0 48%, rgba(255,226,166,.38) 48% 52%, transparent 52% 100%),
linear-gradient(110deg, transparent 0 45%, rgba(255,226,166,.18) 45.5% 46%, transparent 46.5% 100%),
linear-gradient(70deg, transparent 0 54%, rgba(255,226,166,.18) 54.5% 55%, transparent 55.5% 100%);
clip-path:polygon(28% 0,72% 0,100% 100%,0 100%);
}
.doorway-light {
position:absolute;
left:50%;
width:34px;
height:10px;
margin-left:-17px;
border-radius:50%;
background:radial-gradient(ellipse, rgba(255,239,190,.95), rgba(255,239,190,.28) 52%, transparent 70%);
z-index:4;
filter:blur(.15px);
}
.ceiling-light-one { top:15%; transform:scale(.55); opacity:.55; }
.ceiling-light-two { top:28%; transform:scale(.72); opacity:.72; }
.ceiling-light-three { top:42%; transform:scale(.90); opacity:.95; }
.center-arch .arch-plaque {
position:absolute !important;
left:50% !important;
top:49% !important;
transform:translate(-50%,-50%) !important;
z-index:8 !important;
width:min(230px,72%) !important;
min-height:54px !important;
background:rgba(13,11,9,.92) !important;
border:1px solid #b1843d !important;
box-shadow:0 5px 16px rgba(0,0,0,.78), inset 0 0 0 1px rgba(255,222,150,.08) !important;
text-align:center !important;
padding:12px 12px 10px !important;
pointer-events:none !important;
}
.center-arch .arch-plaque strong {
display:block !important;
color:#f0cb7e !important;
font-size:17px !important;
line-height:1.08 !important;
letter-spacing:1px !important;
text-transform:uppercase !important;
white-space:normal !important;
}
.center-arch .arch-plaque span {
display:block !important;
margin-top:5px !important;
color:#ecd8ad !important;
font-family:Arial,Helvetica,sans-serif !important;
font-size:11px !important;
line-height:1.25 !important;
}
/* Keep the display cabinets visible and preserve the v17 item rendering. */
.museum[data-stop-kind="alcove"] .wall { z-index:7 !important; }
.museum[data-stop-kind="alcove"] .mockup-cabinet { z-index:8 !important; }
/* Gallery map overlay must always sit above all cabinets and controls. */
.mini-map:not(.collapsed) {
position:fixed !important;
left:50% !important;
top:50% !important;
bottom:auto !important;
transform:translate(-50%,-50%) !important;
z-index:10000 !important;
width:min(760px, calc(100vw - 80px)) !important;
max-height:calc(100vh - 150px) !important;
overflow:auto !important;
background:rgba(8,8,8,.97) !important;
border:2px solid #b1843d !important;
box-shadow:0 0 0 9999px rgba(0,0,0,.62), 0 16px 60px #000 !important;
}
@media (max-width:1200px){
.center-arch{ left:37.5% !important; right:37.5% !important; }
.center-arch .arch-plaque{ width:min(200px,76%) !important; }
}
/* v19: doorway height/position + fixture pager visibility fixes
- Doorway/corridor is taller, lower, and visually reaches the floor plane.
- Removes the stray upper-left doorway artifact created by decorative inner posts.
- Keeps fixture left/right paging controls inside the visible cabinet face.
- Cabinets use slightly more vertical wall space without hiding the pager below the floor. */
/* Taller, lower through-door view */
.center-arch {
top:158px !important;
bottom:118px !important;
left:39.0% !important;
right:39.0% !important;
z-index:6 !important;
}
.center-arch::before {
border-width:22px !important;
}
.doorway-depth {
left:22px !important;
right:22px !important;
top:22px !important;
bottom:0 !important;
border-radius:108px 108px 0 0 !important;
}
/* Remove the odd little decorative artifact in the upper-left of the doorway. */
.inner-door-frame::before,
.inner-door-frame::after {
display:none !important;
content:none !important;
}
.inner-door-frame {
left:24% !important;
right:24% !important;
top:27% !important;
bottom:18% !important;
border-width:6px !important;
opacity:.92 !important;
}
/* Make the corridor feel taller/deeper while keeping the sign readable. */
.doorway-depth::before {
height:44% !important;
}
.doorway-depth::after {
bottom:-9% !important;
height:66% !important;
}
.doorway-floor-lines {
bottom:0 !important;
height:51% !important;
}
.center-arch .arch-plaque {
top:51% !important;
}
/* Use more vertical display area, but reserve a visible bottom control rail. */
.museum[data-stop-kind="alcove"] .left-wall,
.museum[data-stop-kind="alcove"] .right-wall {
top:132px !important;
bottom:112px !important;
}
.museum[data-stop-kind="alcove"] .mockup-cabinet {
height:100% !important;
padding:16px 20px 14px !important;
position:relative !important;
}
.museum[data-stop-kind="alcove"] .fixture-page {
position:relative !important;
flex:1 1 auto !important;
min-height:0 !important;
padding-bottom:48px !important;
overflow:hidden !important;
}
.museum[data-stop-kind="alcove"] .fixture-item-grid {
height:100% !important;
max-height:100% !important;
box-sizing:border-box !important;
grid-auto-rows:minmax(118px, auto) !important;
padding:12px !important;
}
.museum[data-stop-kind="alcove"] .fixture-item-grid .item-img {
height:100px !important;
}
.museum[data-stop-kind="alcove"] .fixture-pager {
position:absolute !important;
left:0 !important;
right:0 !important;
bottom:0 !important;
margin:0 !important;
z-index:20 !important;
box-sizing:border-box !important;
}
/* Wider screens can show more columns, but the pager remains visible. */
@media (min-width:1500px) {
.museum[data-stop-kind="alcove"] .fixture-item-grid { grid-template-columns:repeat(5, minmax(72px, 1fr)) !important; }
.museum[data-stop-kind="alcove"] .fixture-item-grid .item-img { height:98px !important; }
}
@media (min-width:1900px) {
.museum[data-stop-kind="alcove"] .fixture-item-grid { grid-template-columns:repeat(6, minmax(70px, 1fr)) !important; }
}
@media (max-width:1250px) {
.center-arch { left:37.4% !important; right:37.4% !important; top:166px !important; bottom:126px !important; }
.museum[data-stop-kind="alcove"] .left-wall,
.museum[data-stop-kind="alcove"] .right-wall { top:145px !important; bottom:120px !important; }
.museum[data-stop-kind="alcove"] .fixture-item-grid { grid-template-columns:repeat(3, minmax(70px, 1fr)) !important; }
}
/* v20: doorway cleanup, nested doorway depth, and Gallery Map closing fixes.
This final block intentionally overrides earlier doorway rules. */
.center-arch {
overflow:hidden !important;
isolation:isolate !important;
}
.doorway-depth {
overflow:hidden !important;
background:
linear-gradient(90deg, rgba(0,0,0,.62) 0 9%, transparent 13% 87%, rgba(0,0,0,.62) 91% 100%),
radial-gradient(ellipse at 50% 7%, rgba(255,224,160,.17), transparent 17%),
linear-gradient(180deg,#604832 0%, #3b2c21 30%, #1e1712 31%, #2a2119 100%) !important;
}
/* Permanently suppress the stray decorative artifact/posts in the doorway. */
.inner-door-frame::before,
.inner-door-frame::after,
.inner-door-one::before,
.inner-door-one::after,
.inner-door-two::before,
.inner-door-two::after {
display:none !important;
content:none !important;
}
/* First inner doorway: the nearer nested frame. */
.inner-door-frame.inner-door-one {
position:absolute !important;
left:22% !important;
right:22% !important;
top:25% !important;
bottom:16% !important;
border:7px solid rgba(19,14,11,.96) !important;
border-bottom:0 !important;
border-radius:78px 78px 0 0 !important;
box-shadow:
inset 0 0 0 2px rgba(176,132,62,.74),
0 0 0 2px rgba(0,0,0,.35),
0 12px 28px rgba(0,0,0,.45) !important;
background:transparent !important;
z-index:4 !important;
opacity:.96 !important;
}
/* Second inner doorway: smaller, deeper, centered through the first doorway. */
.inner-door-frame.inner-door-two {
position:absolute !important;
left:34% !important;
right:34% !important;
top:43% !important;
bottom:22% !important;
border:5px solid rgba(15,11,8,.96) !important;
border-bottom:0 !important;
border-radius:52px 52px 0 0 !important;
box-shadow:
inset 0 0 0 1px rgba(176,132,62,.68),
0 0 0 1px rgba(0,0,0,.45),
0 10px 22px rgba(0,0,0,.55) !important;
background:rgba(14,11,9,.12) !important;
z-index:5 !important;
opacity:.94 !important;
}
.doorway-floor-lines {
z-index:3 !important;
height:54% !important;
background:
linear-gradient(90deg, transparent 0 48.7%, rgba(255,226,166,.42) 48.7% 51.3%, transparent 51.3% 100%),
linear-gradient(112deg, transparent 0 45.2%, rgba(255,226,166,.22) 45.5% 46.1%, transparent 46.5% 100%),
linear-gradient(68deg, transparent 0 53.9%, rgba(255,226,166,.22) 54.2% 54.8%, transparent 55.1% 100%) !important;
}
.center-arch .arch-plaque {
z-index:9 !important;
}
/* Make the open Gallery Map clearly interactive on its border/edge. */
.mini-map:not(.collapsed) {
cursor:pointer !important;
padding:22px !important;
}
.mini-map:not(.collapsed) #miniMapPath,
.mini-map:not(.collapsed) .map-stop {
cursor:default !important;
}
.mini-map:not(.collapsed)::after {
content:'Click map edge or outside map to close' !important;
display:block !important;
margin-top:14px !important;
color:#d7bd7b !important;
font-family:Arial,Helvetica,sans-serif !important;
font-size:12px !important;
text-align:center !important;
opacity:.82 !important;
}
/* v21: doorway artifact removal and floor-alignment correction.
- The persistent upper-left doorway artifact was coming from the nested doorway/ceiling composition inside .doorway-depth.
This override removes all side-post pseudo-elements, moves the nested frames fully inside the corridor, and masks any leftover clipped edge.
- The through-door floor now terminates at the rear floor line instead of projecting over the current room floor. */
.center-arch {
top:170px !important;
bottom:158px !important;
left:39.0% !important;
right:39.0% !important;
overflow:hidden !important;
background:transparent !important;
}
.center-arch::before {
border-width:22px !important;
border-bottom:0 !important;
z-index:6 !important;
}
.center-arch::after {
display:none !important;
content:none !important;
}
.doorway-depth {
left:22px !important;
right:22px !important;
top:22px !important;
bottom:0 !important;
overflow:hidden !important;
border-radius:104px 104px 0 0 !important;
background:
linear-gradient(90deg, rgba(0,0,0,.68) 0 11%, transparent 16% 84%, rgba(0,0,0,.68) 89% 100%),
radial-gradient(ellipse at 50% 8%, rgba(255,224,160,.18), transparent 18%),
linear-gradient(180deg,#604832 0%, #3b2c21 31%, #1e1712 32%, #2a2119 100%) !important;
}
/* Hard mask: guarantees nothing decorative can appear in the upper-left interior of the arch. */
.doorway-depth .doorway-artifact-mask,
.doorway-depth > .artifact-mask { display:none !important; }
.doorway-depth::selection { background:transparent; }
/* Remove all decorative posts and pseudo-elements that created the clipped upper-left sliver. */
.inner-door-frame::before,
.inner-door-frame::after,
.inner-door-one::before,
.inner-door-one::after,
.inner-door-two::before,
.inner-door-two::after,
.doorway-depth > i,
.doorway-depth > b {
display:none !important;
content:none !important;
width:0 !important;
height:0 !important;
border:0 !important;
box-shadow:none !important;
}
/* Keep two inner doorways, but keep them centered and away from the outer arch edge. */
.inner-door-frame.inner-door-one {
left:28% !important;
right:28% !important;
top:36% !important;
bottom:13% !important;
border:6px solid rgba(19,14,11,.96) !important;
border-bottom:0 !important;
border-radius:64px 64px 0 0 !important;
background:rgba(12,9,7,.06) !important;
z-index:4 !important;
}
.inner-door-frame.inner-door-two {
left:39% !important;
right:39% !important;
top:54% !important;
bottom:20% !important;
border:4px solid rgba(15,11,8,.98) !important;
border-bottom:0 !important;
border-radius:42px 42px 0 0 !important;
background:rgba(12,9,7,.10) !important;
z-index:5 !important;
}
/* Make the through-door floor end at the doorway base rather than spilling over the room floor. */
.doorway-depth::after {
bottom:0 !important;
height:47% !important;
transform:perspective(480px) rotateX(58deg) !important;
transform-origin:bottom center !important;
z-index:1 !important;
}
.doorway-floor-lines {
bottom:0 !important;
height:44% !important;
z-index:3 !important;
clip-path:polygon(34% 0,66% 0,100% 100%,0 100%) !important;
}
/* Keep the alcove sign centered and readable in front of the nested doorway. */
.center-arch .arch-plaque {
top:52% !important;
left:50% !important;
transform:translate(-50%,-50%) !important;
z-index:12 !important;
}
/* Align the rear threshold with the room floor line and avoid foreground overlap. */
.museum[data-stop-kind="alcove"] .center-arch {
bottom:158px !important;
}
@media (max-width:1250px) {
.center-arch { top:178px !important; bottom:166px !important; left:37.8% !important; right:37.8% !important; }
.inner-door-frame.inner-door-one { left:27% !important; right:27% !important; }
.inner-door-frame.inner-door-two { left:38% !important; right:38% !important; }
}
/* v22: definitive doorway artifact removal and floor-line alignment.
The persistent top-left doorway sliver was the empty center arch's pseudo-frame
being painted before JavaScript inserted the doorway-depth markup. When the
arch has no content, do not render it or any pseudo-elements at all. */
.center-arch:empty,
.center-arch:empty::before,
.center-arch:empty::after {
display:none !important;
content:none !important;
visibility:hidden !important;
border:0 !important;
box-shadow:none !important;
background:transparent !important;
}
/* Lower the doorway so its threshold/floor section meets the current room's
floor line instead of floating above it. */
.center-arch {
top:170px !important;
bottom:120px !important;
left:39.0% !important;
right:39.0% !important;
}
.museum[data-stop-kind="alcove"] .center-arch,
.museum[data-stop-kind="entry"] .center-arch,
.museum[data-stop-kind="search"] .center-arch {
bottom:120px !important;
}
.doorway-depth {
bottom:0 !important;
}
.doorway-depth::after {
bottom:0 !important;
height:43% !important;
}
.doorway-floor-lines {
bottom:0 !important;
height:42% !important;
}
@media (max-width:1250px) {
.center-arch { top:176px !important; bottom:128px !important; left:37.8% !important; right:37.8% !important; }
.museum[data-stop-kind="alcove"] .center-arch,
.museum[data-stop-kind="entry"] .center-arch,
.museum[data-stop-kind="search"] .center-arch { bottom:128px !important; }
}
/* v23: definitive doorway artifact removal + floor threshold alignment.
The recurring upper-left doorway mark was caused by the decorative outer arch
pseudo-frame (.center-arch::before) painting its clipped/inset border inside
the doorway. This version disables that pseudo-frame completely and draws the
arch frame on .center-arch itself, so there is no separate clipped object that
can appear as a floating vertical sliver. */
.center-arch {
top:170px !important;
bottom:88px !important;
left:39.0% !important;
right:39.0% !important;
z-index:6 !important;
overflow:hidden !important;
pointer-events:none !important;
box-sizing:border-box !important;
border:22px solid #1f1712 !important;
border-bottom:0 !important;
border-radius:118px 118px 0 0 !important;
background:transparent !important;
box-shadow:
inset 0 0 0 4px #9f783c,
inset 0 0 0 9px rgba(0,0,0,.55),
0 12px 26px rgba(0,0,0,.65) !important;
isolation:isolate !important;
}
.center-arch::before,
.center-arch::after {
display:none !important;
content:none !important;
visibility:hidden !important;
width:0 !important;
height:0 !important;
border:0 !important;
box-shadow:none !important;
background:transparent !important;
}
.doorway-depth {
left:0 !important;
right:0 !important;
top:0 !important;
bottom:0 !important;
border-radius:96px 96px 0 0 !important;
overflow:hidden !important;
box-shadow:inset 0 0 22px rgba(0,0,0,.84), inset 0 0 0 2px rgba(159,120,60,.35) !important;
}
/* Explicitly neutralize every old decorative post/clip source. */
.inner-door-frame::before,
.inner-door-frame::after,
.inner-door-one::before,
.inner-door-one::after,
.inner-door-two::before,
.inner-door-two::after,
.doorway-depth::selection,
.doorway-depth > i,
.doorway-depth > b,
.doorway-depth > em,
.doorway-depth > small {
display:none !important;
content:none !important;
visibility:hidden !important;
width:0 !important;
height:0 !important;
border:0 !important;
box-shadow:none !important;
background:transparent !important;
}
/* The through-door floor now starts/ends inside the doorway and visually meets
the front room floor line instead of floating above it. */
.doorway-depth::after {
bottom:-1px !important;
height:39% !important;
transform:perspective(520px) rotateX(58deg) !important;
transform-origin:bottom center !important;
}
.doorway-floor-lines {
bottom:0 !important;
height:39% !important;
clip-path:polygon(35% 0,65% 0,100% 100%,0 100%) !important;
}
.inner-door-frame.inner-door-one {
left:29% !important;
right:29% !important;
top:39% !important;
bottom:11% !important;
}
.inner-door-frame.inner-door-two {
left:40% !important;
right:40% !important;
top:56% !important;
bottom:17% !important;
}
.center-arch .arch-plaque {
top:52% !important;
z-index:12 !important;
}
.museum[data-stop-kind="alcove"] .center-arch,
.museum[data-stop-kind="entry"] .center-arch,
.museum[data-stop-kind="search"] .center-arch {
bottom:88px !important;
}
@media (max-width:1250px) {
.center-arch { top:176px !important; bottom:96px !important; left:37.8% !important; right:37.8% !important; }
.museum[data-stop-kind="alcove"] .center-arch,
.museum[data-stop-kind="entry"] .center-arch,
.museum[data-stop-kind="search"] .center-arch { bottom:96px !important; }
}
/* v24: doorway scale and fixture-bottom alignment.
User request: make the central arch doorway 90% of its v23 width and shorter,
with its bottom aligned to the bottom line of the display fixtures. */
.center-arch {
left:40.1% !important;
right:40.1% !important;
top:196px !important;
bottom:112px !important;
border-width:20px !important;
border-bottom:0 !important;
border-radius:106px 106px 0 0 !important;
}
.museum[data-stop-kind="alcove"] .center-arch,
.museum[data-stop-kind="entry"] .center-arch,
.museum[data-stop-kind="search"] .center-arch {
bottom:112px !important;
}
.doorway-depth {
border-radius:86px 86px 0 0 !important;
}
.inner-door-frame.inner-door-one {
left:29% !important;
right:29% !important;
top:36% !important;
bottom:12% !important;
border-radius:58px 58px 0 0 !important;
}
.inner-door-frame.inner-door-two {
left:40% !important;
right:40% !important;
top:54% !important;
bottom:18% !important;
border-radius:38px 38px 0 0 !important;
}
.center-arch .arch-plaque {
top:52% !important;
width:205px !important;
}
.doorway-depth::after {
height:39% !important;
bottom:0 !important;
}
.doorway-floor-lines {
height:39% !important;
bottom:0 !important;
}
@media (max-width:1250px) {
.center-arch {
left:39.7% !important;
right:39.7% !important;
top:200px !important;
bottom:120px !important;
}
.museum[data-stop-kind="alcove"] .center-arch,
.museum[data-stop-kind="entry"] .center-arch,
.museum[data-stop-kind="search"] .center-arch {
bottom:120px !important;
}
}
/* v25: doorway threshold aligned to the current room floor line.
User request: align the bottom of the central arch doorway with the top edge
of the current room's floor. v24 left the doorway a few pixels too low, so
the doorway/floor section appeared to overlap the foreground floor. */
.center-arch {
bottom:124px !important;
}
.museum[data-stop-kind="alcove"] .center-arch,
.museum[data-stop-kind="entry"] .center-arch,
.museum[data-stop-kind="search"] .center-arch {
bottom:124px !important;
}
.doorway-depth,
.doorway-depth::after,
.doorway-floor-lines {
bottom:0 !important;
}
@media (max-width:1250px) {
.center-arch {
bottom:132px !important;
}
.museum[data-stop-kind="alcove"] .center-arch,
.museum[data-stop-kind="entry"] .center-arch,
.museum[data-stop-kind="search"] .center-arch {
bottom:132px !important;
}
}
/* v29 Camera orientation: A/D visibly turn the view left and right.
This is a staged 2.5D camera, not a full 3D renderer. The controls now
change the room composition by emphasizing the selected wall and pushing
the opposite wall/doorway into the periphery. */
.museum.look-center .wall,
.museum.look-center .center-arch {
transition: transform .28s ease, opacity .28s ease, width .28s ease, left .28s ease, right .28s ease, filter .28s ease;
}
.museum.look-left .left-wall,
.museum.look-left .right-wall,
.museum.look-left .center-arch,
.museum.look-right .left-wall,
.museum.look-right .right-wall,
.museum.look-right .center-arch {
transition: transform .28s ease, opacity .28s ease, width .28s ease, left .28s ease, right .28s ease, filter .28s ease;
}
/* Looking left: the left display becomes the primary view. */
.museum.look-left .left-wall {
width: 58% !important;
z-index: 18 !important;
opacity: 1;
filter: none;
transform: skewY(1deg) translateX(24px) scale(1.025) !important;
padding-left: 42px !important;
padding-right: 42px !important;
}
.museum.look-left .right-wall {
width: 24% !important;
z-index: 3 !important;
opacity: .24;
filter: blur(.4px) brightness(.7);
transform: skewY(-7deg) translateX(30px) scale(.94) !important;
pointer-events: none;
}
.museum.look-left .center-arch {
left: 61% !important;
right: 8% !important;
opacity: .56;
filter: brightness(.72);
transform: translateX(10px) scale(.88) !important;
}
/* Looking right: mirror of left view. */
.museum.look-right .right-wall {
width: 58% !important;
z-index: 18 !important;
opacity: 1;
filter: none;
transform: skewY(-1deg) translateX(-24px) scale(1.025) !important;
padding-left: 42px !important;
padding-right: 42px !important;
}
.museum.look-right .left-wall {
width: 24% !important;
z-index: 3 !important;
opacity: .24;
filter: blur(.4px) brightness(.7);
transform: skewY(7deg) translateX(-30px) scale(.94) !important;
pointer-events: none;
}
.museum.look-right .center-arch {
left: 8% !important;
right: 61% !important;
opacity: .56;
filter: brightness(.72);
transform: translateX(-10px) scale(.88) !important;
}
/* Keep entrance helper panels readable while still honoring camera turn. */
.museum[data-stop-kind="entrance"].look-left .navigation-instructions {
opacity: .35;
}
.museum[data-stop-kind="entrance"].look-right .navigation-instructions {
opacity: 1;
}
/* A/D should not hide modal/overlay content. */
.overlay-panel,
.overlay-box,
.mini-map {
transform: none;
}
@media (max-width:900px){
.museum.look-left .left-wall,
.museum.look-left .right-wall,
.museum.look-right .left-wall,
.museum.look-right .right-wall,
.museum.look-left .center-arch,
.museum.look-right .center-arch {
width:auto !important;
opacity:1 !important;
filter:none !important;
transform:none !important;
pointer-events:auto !important;
}
}
/* v30: raise doorway slightly so the arch threshold aligns with the top edge of the visible floor tiles. */
.center-arch,
.museum[data-stop-kind="alcove"] .center-arch,
.museum[data-stop-kind="entry"] .center-arch,
.museum[data-stop-kind="entrance"] .center-arch,
.museum[data-stop-kind="search"] .center-arch,
.museum[data-arch-state="closed"] .center-arch {
bottom: 142px !important;
}
@media (max-width:1250px) {
.center-arch,
.museum[data-stop-kind="alcove"] .center-arch,
.museum[data-stop-kind="entry"] .center-arch,
.museum[data-stop-kind="entrance"] .center-arch,
.museum[data-stop-kind="search"] .center-arch,
.museum[data-arch-state="closed"] .center-arch {
bottom: 150px !important;
}
}
/* v32: Layout polish requested after v31.
1) Lift Gallery Map medallion so it no longer overlaps the walk-status rectangle.
2) Center the CATEGORY ROOM plaque precisely under the category title box. */
.gallery-map-medallion,
.floor-medallion {
bottom: 86px !important;
}
.room-title .room-number,
.room-number {
left: 50% !important;
right: auto !important;
margin-left: 0 !important;
transform: translateX(-50%) !important;
white-space: nowrap !important;
text-align: center !important;
}
/* Keep the walk controls below the raised map oval without changing their behavior. */
.walk-controls {
bottom: 18px !important;
}
/* v37: Camera turn display cleanup.
When the visitor turns left or right, the active display should read as a clean
front-facing museum cabinet rather than a distorted perspective panel. The
camera turn still emphasizes the selected wall, but removes skew/rotate from
the visible fixture and its cabinet contents. */
.museum.look-left .left-wall,
.museum.look-right .right-wall {
transform: translateX(0) scale(1.02) !important;
}
.museum.look-left .left-wall .fixture,
.museum.look-left .left-wall .display-cabinet,
.museum.look-left .left-wall .wall-cabinet,
.museum.look-left .left-wall .group-bay,
.museum.look-right .right-wall .fixture,
.museum.look-right .right-wall .display-cabinet,
.museum.look-right .right-wall .wall-cabinet,
.museum.look-right .right-wall .group-bay {
transform: none !important;
}
.museum.look-left .right-wall,
.museum.look-right .left-wall {
transform: translateX(0) scale(.94) !important;
}
.museum.look-left .right-wall .fixture,
.museum.look-right .left-wall .fixture {
transform: none !important;
}
/* v43 search-room cleanup */
.kiosk .kiosk-search {
position: relative;
top: auto;
right: auto;
width: 100%;
max-width: none;
margin: 12px 0 0 0;
display: flex;
}
.kiosk .kiosk-search input {
flex: 1;
}
.search-results {
margin-top: 12px;
max-height: 260px;
overflow: auto;
}
/* v44: final-hall search terminal is a single wall fixture, not a separate floating kiosk */
.search-terminal-wall {
padding: 32px 42px;
text-align: center;
}
.search-terminal-wall .kiosk-search {
position: relative;
top: auto;
right: auto;
width: min(680px, 92%);
margin: 24px auto 0 auto;
display: flex;
transform: none;
}
.search-terminal-wall .kiosk-search input {
flex: 1;
min-width: 0;
}
.search-terminal-wall .search-results {
width: min(680px, 92%);
margin: 14px auto 0 auto;
max-height: 230px;
overflow: auto;
text-align: left;
}
/* ==========================================================================
PROFESSIONAL FINAL OVERRIDES - v56
--------------------------------------------------------------------------
These rules intentionally consolidate the visual corrections made during
prototype patches. They sit at the end of the stylesheet so they override
earlier room/fixture styles without requiring a risky full visual rewrite.
========================================================================== */
/* Fixture headers: manufacturer/category title and optional group subtitle.
The group subtitle is now displayed inside the title block by JavaScript
as .fixture-title-group. There should be no horizontal separator line
between the title and subtitle or between the subtitle and item grid. */
.museum[data-stop-kind="alcove"] .fixture .fixture-title,
.museum[data-stop-kind="alcove"] .wall .fixture .fixture-title,
.museum[data-stop-kind="alcove"] .mockup-cabinet .fixture-title,
.fixture-title.no-separator {
border:0 !important;
border-top:0 !important;
border-bottom:0 !important;
background:none !important;
background-image:none !important;
box-shadow:none !important;
outline:0 !important;
padding-bottom:2px !important;
margin-bottom:4px !important;
}
.museum[data-stop-kind="alcove"] .fixture .fixture-title span,
.fixture-title.no-separator span {
border:0 !important;
border-top:0 !important;
border-bottom:0 !important;
background:none !important;
background-image:none !important;
box-shadow:none !important;
outline:0 !important;
text-decoration:none !important;
}
.museum[data-stop-kind="alcove"] .fixture .fixture-title::before,
.museum[data-stop-kind="alcove"] .fixture .fixture-title::after,
.museum[data-stop-kind="alcove"] .fixture .fixture-title span::before,
.museum[data-stop-kind="alcove"] .fixture .fixture-title span::after,
.fixture-title.no-separator::before,
.fixture-title.no-separator::after,
.fixture-title.no-separator span::before,
.fixture-title.no-separator span::after {
content:none !important;
display:none !important;
border:0 !important;
background:none !important;
box-shadow:none !important;
}
.fixture-title .fixture-title-group,
.museum[data-stop-kind="alcove"] .fixture-title .fixture-title-group {
display:block !important;
margin:3px 0 0 !important;
padding:0 !important;
border:0 !important;
border-top:0 !important;
border-bottom:0 !important;
background:none !important;
background-image:none !important;
box-shadow:none !important;
outline:0 !important;
text-decoration:none !important;
font-family:Arial,Helvetica,sans-serif !important;
font-style:normal !important;
font-size:15px !important;
line-height:1.15 !important;
letter-spacing:.03em !important;
color:#f0d392 !important;
text-transform:none !important;
}
.fixture-title .fixture-title-group::before,
.fixture-title .fixture-title-group::after {
content:none !important;
display:none !important;
}
/* Legacy safety: old versions emitted a separate .fixture-group-summary row.
It is hidden here so cached/older markup cannot reintroduce the separator. */
.fixture-group-summary,
.fixture .fixture-group-summary,
.wall .fixture .fixture-group-summary,
.mockup-cabinet .fixture-group-summary {
display:none !important;
}
/* Fixture page/content area: prevent the item-grid container from drawing a
top line immediately below the title/group text. Item cards keep their own
borders so the display still has structure. */
.museum[data-stop-kind="alcove"] .fixture-page,
.museum[data-stop-kind="alcove"] .fixture .fixture-page,
.museum[data-stop-kind="alcove"] .mockup-cabinet .fixture-page,
.fixture-page.no-separator {
border:0 !important;
border-top:0 !important;
border-bottom:0 !important;
outline:0 !important;
box-shadow:none !important;
background-image:none !important;
margin-top:4px !important;
}
.museum[data-stop-kind="alcove"] .fixture-page::before,
.museum[data-stop-kind="alcove"] .fixture-page::after,
.fixture-page.no-separator::before,
.fixture-page.no-separator::after {
content:none !important;
display:none !important;
}
/* Doorway: the central archway is a supplied PNG asset. The browser should
not draw a second CSS arch, border, shadow, internal lights, or inner door
elements on top of it. */
.center-arch {
background:url("arch_doorway.png") center bottom / 100% 100% no-repeat !important;
border:0 !important;
outline:0 !important;
box-shadow:none !important;
border-radius:0 !important;
}
.center-arch::before,
.center-arch::after,
.center-arch .doorway-depth::before,
.center-arch .doorway-depth::after,
.center-arch .doorway-depth-image::before,
.center-arch .doorway-depth-image::after,
.center-arch .doorway-light,
.center-arch .inner-door-frame,
.center-arch .doorway-floor-lines {
content:none !important;
display:none !important;
background:none !important;
border:0 !important;
box-shadow:none !important;
}
.center-arch .doorway-depth,
.center-arch .doorway-depth-image {
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
background:transparent !important;
border:0 !important;
outline:0 !important;
box-shadow:none !important;
pointer-events:none !important;
}
/* Gallery map overlay must stay above the doorway graphic. */
.gallery-map-medallion {
z-index:9;
}
/* Map popup helper text. */
.mini-map-instructions {
margin:4px 0 12px;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
line-height:1.35;
color:#d6c19a;
text-align:center;
}
/* Alcove indicator under room title. */
.room-number {
white-space:nowrap;
min-width:190px;
margin-left:-95px;
text-align:center;
}
/* v57: alcove item labels use name-only captions with room for three lines.
Record numbers are no longer shown under fixture images in alcove view. */
.item-caption {
min-height: 3.45em;
max-height: 3.45em;
line-height: 1.15;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.item-rec {
display: none !important;
}
/* v58: category-to-category hall navigation signs */
.arch-navigation-sign {
position:absolute;
left:50%;
top:46%;
transform:translate(-50%,-50%);
z-index:10;
min-width:240px;
max-width:360px;
padding:13px 18px;
text-align:center;
background:rgba(7,6,5,.88);
border:1px solid #a8792d;
box-shadow:0 8px 22px rgba(0,0,0,.55);
color:#f3d48b;
pointer-events:none;
}
.arch-navigation-sign strong {
display:inline;
font-family:Arial,Helvetica,sans-serif;
font-size:13px;
letter-spacing:.04em;
text-transform:uppercase;
color:#ffd886;
}
.arch-navigation-sign span {
display:inline;
margin-left:4px;
font-family:Georgia,'Times New Roman',serif;
font-size:15px;
line-height:1.18;
color:#fff0c8;
}
/* v59: Entry-room Previous Room sign placement.
The Previous Room notice no longer sits inside the arch doorway. It is
positioned between the New Arrivals sign area and the Gallery Map oval. */
.entry-previous-room-sign {
position:absolute;
left:50%;
top:18%;
transform:translateX(-50%);
z-index:8;
min-width:250px;
max-width:390px;
padding:11px 18px;
text-align:center;
background:rgba(7,6,5,.88);
border:1px solid #a8792d;
box-shadow:0 8px 22px rgba(0,0,0,.55);
color:#f3d48b;
pointer-events:none;
}
.entry-previous-room-sign strong {
display:inline;
font-family:Arial,Helvetica,sans-serif;
font-size:13px;
letter-spacing:.04em;
text-transform:uppercase;
color:#ffd886;
}
.entry-previous-room-sign span {
display:inline;
margin-left:4px;
font-family:Georgia,'Times New Roman',serif;
font-size:15px;
line-height:1.18;
color:#fff0c8;
}
/* v60: Previous Room sign is vertically centered over the Gallery Map oval zone.
It sits between the New Arrivals display and the Gallery Map oval, rather than
high in the arch doorway. */
.entry-previous-room-sign.previous-room-map-centered {
position:absolute !important;
left:50% !important;
top:65.5% !important;
transform:translate(-50%,-50%) !important;
z-index:11 !important;
min-width:270px !important;
max-width:420px !important;
padding:10px 18px !important;
text-align:center !important;
background:rgba(7,6,5,.90) !important;
border:1px solid #a8792d !important;
box-shadow:0 8px 22px rgba(0,0,0,.58) !important;
color:#f3d48b !important;
pointer-events:none !important;
}
.entry-previous-room-sign.previous-room-map-centered strong {
display:inline !important;
font-family:Arial,Helvetica,sans-serif !important;
font-size:13px !important;
letter-spacing:.04em !important;
text-transform:uppercase !important;
color:#ffd886 !important;
}
.entry-previous-room-sign.previous-room-map-centered span {
display:inline !important;
margin-left:4px !important;
font-family:Georgia,'Times New Roman',serif !important;
font-size:15px !important;
line-height:1.18 !important;
color:#fff0c8 !important;
}
/* v61: Entry Previous Room sign sits just above the Gallery Map oval, aligned to that zone. */
.entry-previous-room-sign.previous-room-map-centered {
top:58.5% !important;
z-index:11 !important;
}
/* v61: End-of-hall Next Hall sign is above the doorway, not inside the doorway. */
.next-hall-above-door-sign {
position:absolute;
left:50%;
top:28.5%;
transform:translateX(-50%);
z-index:11;
min-width:280px;
max-width:460px;
padding:11px 18px;
text-align:center;
background:rgba(7,6,5,.90);
border:1px solid #a8792d;
box-shadow:0 8px 22px rgba(0,0,0,.58);
color:#f3d48b;
pointer-events:none;
}
.next-hall-above-door-sign strong {
display:inline;
font-family:Arial,Helvetica,sans-serif;
font-size:13px;
letter-spacing:.04em;
text-transform:uppercase;
color:#ffd886;
}
.next-hall-above-door-sign span {
display:inline;
margin-left:4px;
font-family:Georgia,'Times New Roman',serif;
font-size:15px;
line-height:1.18;
color:#fff0c8;
}
/* v61: New Arrivals case uses a scrollable 2x2 grid, independent from alcove fixture layout. */
.new-arrivals .glass-case {
display:grid !important;
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
grid-auto-rows:auto !important;
gap:10px !important;
max-height:238px !important;
overflow-y:auto !important;
overflow-x:hidden !important;
padding:12px !important;
align-items:start !important;
}
.new-arrivals .new-arrival-tile {
width:100% !important;
margin:0 !important;
padding:4px !important;
}
.new-arrivals .new-arrival-tile .item-img {
height:104px !important;
}
.new-arrivals .new-arrival-caption {
height:2.4em !important;
min-height:2.4em !important;
max-height:2.4em !important;
line-height:1.2 !important;
display:-webkit-box !important;
-webkit-line-clamp:2 !important;
-webkit-box-orient:vertical !important;
overflow:hidden !important;
}
.no-new-arrivals {
grid-column:1 / -1;
margin:0;
padding:10px;
color:#f8ead0;
}
/* v62: Next Hall replaces the room-type sign above the doorway.
Do not display the separate v61 next-hall floating sign. */
.next-hall-above-door-sign {
display:none !important;
}
/* v63: End-of-hall Next Hall information appears inside the large title sign.
This preserves the main sign style rather than using the small room-type label. */
.museum[data-stop-kind="kiosk"] .room-title h1 {
font-size:30px !important;
line-height:1.08 !important;
letter-spacing:.07em !important;
}
/* v64: New Arrivals case uses a scrollable 3x3 grid.
Item names remain limited to two lines. */
.new-arrivals {
width:430px !important;
}
.new-arrivals .glass-case {
display:grid !important;
grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
grid-auto-rows:auto !important;
gap:9px !important;
max-height:382px !important;
overflow-y:auto !important;
overflow-x:hidden !important;
padding:12px !important;
align-items:start !important;
}
.new-arrivals .new-arrival-tile {
width:100% !important;
margin:0 !important;
padding:4px !important;
}
.new-arrivals .new-arrival-tile .item-img {
height:104px !important;
}
.new-arrivals .new-arrival-caption {
height:2.4em !important;
min-height:2.4em !important;
max-height:2.4em !important;
line-height:1.2 !important;
display:-webkit-box !important;
-webkit-line-clamp:2 !important;
-webkit-box-orient:vertical !important;
overflow:hidden !important;
}
/* v65: In the end-of-hall main sign, only the "NEXT HALL:" label is 50% size.
The actual next hall/category name remains at the main sign size. */
.museum[data-stop-kind="kiosk"] .room-title h1 .next-hall-label {
font-size:50% !important;
line-height:1 !important;
letter-spacing:.08em !important;
}
/* v66: Walk by Country adds another top/footer navigation button. */
.vm-nav button {
padding-left:20px;
padding-right:20px;
}
.vm-bottombar button {
white-space:nowrap;
}
/* v68: Walk by Year adds another top/footer navigation button. */
.vm-nav button {
padding-left:17px;
padding-right:17px;
}
.overlay-note {
margin: -4px 0 14px;
color: #d8c49b;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 1.35;
}
/* v75: AI-style fixture background art
The central doorway already uses a supplied image asset. This section gives
the left/right display fixtures the same treatment using PNG background art.
There are two views per side:
- forward view: angled fixtures seen while walking forward
- facing view: flat-on fixture art when the visitor looks left/right
*/
.museum[data-stop-kind="alcove"] .left-wall .mockup-cabinet,
.museum[data-stop-kind="alcove"] .right-wall .mockup-cabinet {
position:relative !important;
border:0 !important;
border-radius:0 !important;
box-shadow:0 22px 34px rgba(0,0,0,.74) !important;
background-repeat:no-repeat !important;
background-position:center center !important;
background-size:100% 100% !important;
background-color:transparent !important;
padding:54px 58px 52px !important;
}
/* Hide the old drawn top rule. The background art now contains its own trim. */
.museum[data-stop-kind="alcove"] .mockup-cabinet::before {
content:none !important;
display:none !important;
}
/* Forward/walk view fixture art */
.museum[data-stop-kind="alcove"].look-center .left-wall .mockup-cabinet,
.museum[data-stop-kind="alcove"]:not(.look-left):not(.look-right) .left-wall .mockup-cabinet {
background-image:url("fixture.jpg") !important;
}
.museum[data-stop-kind="alcove"].look-center .right-wall .mockup-cabinet,
.museum[data-stop-kind="alcove"]:not(.look-left):not(.look-right) .right-wall .mockup-cabinet {
background-image:url("fixture.jpg") !important;
}
/* Facing-display view fixture art */
.museum[data-stop-kind="alcove"].look-left .left-wall .mockup-cabinet {
background-image:url("fixture.jpg") !important;
padding:62px 70px 60px !important;
}
.museum[data-stop-kind="alcove"].look-right .right-wall .mockup-cabinet {
background-image:url("fixture.jpg") !important;
padding:62px 70px 60px !important;
}
/* Opposite wall remains in forward-style perspective while dimmed. */
.museum[data-stop-kind="alcove"].look-left .right-wall .mockup-cabinet {
background-image:url("fixture.jpg") !important;
}
.museum[data-stop-kind="alcove"].look-right .left-wall .mockup-cabinet {
background-image:url("fixture.jpg") !important;
}
/* Keep dynamic text/items legible over the artwork recess. */
.museum[data-stop-kind="alcove"] .mockup-cabinet .fixture-title {
position:relative !important;
z-index:3 !important;
margin-top:0 !important;
margin-bottom:8px !important;
max-height:86px !important;
}
.museum[data-stop-kind="alcove"] .mockup-cabinet .fixture-page {
position:relative !important;
z-index:3 !important;
padding-bottom:50px !important;
}
.museum[data-stop-kind="alcove"] .fixture-item-grid {
background:rgba(10,7,5,.78) !important;
border:1px solid rgba(185,139,68,.85) !important;
box-shadow:inset 0 0 28px rgba(0,0,0,.88) !important;
}
.museum[data-stop-kind="alcove"] .fixture-pager {
background:rgba(12,8,5,.92) !important;
border-color:rgba(176,128,56,.9) !important;
}
/* The facing fixture can use a slightly cleaner, non-skewed panel. */
.museum[data-stop-kind="alcove"].look-left .left-wall,
.museum[data-stop-kind="alcove"].look-right .right-wall {
transform:none !important;
}
/* v76: Responsive sign scaling
Fixed-position museum signs are scaled from a shared --vm-ui-scale value
set by museum.js. This keeps the UI usable in non-fullscreen windows while
preserving the full-size composition on large displays. */
.museum {
--vm-ui-scale: 1;
}
/* Room information sign */
.room-card {
transform:scale(var(--vm-ui-scale)) !important;
transform-origin:top left !important;
}
/* New Arrivals sign/case */
.new-arrivals {
transform:scale(var(--vm-ui-scale)) !important;
transform-origin:bottom left !important;
}
/* Main category/manufacturer/country/year room sign */
.room-title {
transform:translateX(-50%) scale(var(--vm-ui-scale)) !important;
transform-origin:top center !important;
}
/* Right-side navigation sign */
.navigation-instructions {
transform:scale(var(--vm-ui-scale)) !important;
transform-origin:top right !important;
}
/* Gallery Map oval and bottom walk-stop plaque */
.gallery-map-medallion {
transform:scale(var(--vm-ui-scale)) !important;
transform-origin:bottom center !important;
}
.walk-controls .walk-label,
.walk-label {
transform:scale(var(--vm-ui-scale)) !important;
transform-origin:bottom center !important;
}
/* Entry Previous Room sign and doorway/hall notice sign */
.entry-previous-room-sign,
.next-hall-above-door-sign,
.arch-navigation-sign {
transform:translateX(-50%) scale(var(--vm-ui-scale)) !important;
transform-origin:center center !important;
}
/* Compact and reduced modes: create more breathing room between scaled signs. */
.museum[data-ui-scale="reduced"] .room-card,
.museum[data-ui-scale="compact"] .room-card {
left:12px !important;
top:12px !important;
}
.museum[data-ui-scale="reduced"] .navigation-instructions,
.museum[data-ui-scale="compact"] .navigation-instructions {
right:12px !important;
top:190px !important;
}
.museum[data-ui-scale="reduced"] .new-arrivals,
.museum[data-ui-scale="compact"] .new-arrivals {
left:16px !important;
bottom:104px !important;
}
.museum[data-ui-scale="reduced"] .room-title,
.museum[data-ui-scale="compact"] .room-title {
top:76px !important;
}
.museum[data-ui-scale="compact"] .center-arch {
left:40% !important;
right:40% !important;
}
.museum[data-ui-scale="compact"] .gallery-map-medallion {
bottom:78px !important;
}
/* Keep top/footer controls from crowding the viewport at intermediate widths. */
@media (max-width: 1250px) {
.vm-logo {
min-width: 210px !important;
}
.vm-nav button {
padding-left:14px !important;
padding-right:14px !important;
font-size:14px !important;
}
.vm-search {
width:230px !important;
}
.vm-bottombar button {
min-width:auto !important;
padding-left:13px !important;
padding-right:13px !important;
font-size:12px !important;
}
.vm-bottombar .where {
font-size:13px !important;
max-width:300px !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
}
@media (max-width: 1050px) {
.vm-header {
height:58px !important;
}
.vm-logo {
min-width:185px !important;
padding-left:14px !important;
}
.vm-logo .logo-text strong {
font-size:22px !important;
line-height:.9 !important;
}
.vm-logo .mark {
width:38px !important;
height:38px !important;
}
.vm-nav button {
padding-left:10px !important;
padding-right:10px !important;
font-size:13px !important;
}
.vm-search {
width:190px !important;
margin-right:10px !important;
}
.museum {
top:58px !important;
}
}
/* v77: centered responsive signs
v76 scaled the main sign with translateX(-50%), but the sign was already
centered by left:50% + negative margin. That double-centering shifted it
left. These overrides preserve the original center math and scale only. */
.room-title {
left:50% !important;
width:460px !important;
margin-left:-230px !important;
transform:scale(var(--vm-ui-scale)) !important;
transform-origin:top center !important;
}
.room-title .room-number {
left:50% !important;
margin-left:-58px !important;
transform:none !important;
}
/* The walk controls include the alcove/status plaque under the Gallery Map.
Scale the entire group so the plaque and buttons remain visually related. */
.walk-controls {
left:50% !important;
width:520px !important;
margin-left:-260px !important;
transform:scale(var(--vm-ui-scale)) !important;
transform-origin:bottom center !important;
}
.walk-controls .walk-label,
.walk-label,
.walk-status {
transform:none !important;
}
/* Reduced/compact modes should keep the centered sign centered. */
.museum[data-ui-scale="reduced"] .room-title,
.museum[data-ui-scale="compact"] .room-title {
left:50% !important;
margin-left:-230px !important;
transform:scale(var(--vm-ui-scale)) !important;
}
/* Keep the bottom status plaque from crowding the footer in reduced windows. */
.museum[data-ui-scale="reduced"] .walk-controls,
.museum[data-ui-scale="compact"] .walk-controls {
bottom:28px !important;
}
/* v78: Arch doorway floor anchoring
The arch doorway PNG should not float upward in reduced-size windows.
Its bottom edge is anchored to the calculated floor line, and the image
stretches upward from that anchor. */
.museum {
--vm-arch-floor-bottom: 142px;
}
.center-arch,
.museum[data-stop-kind] .center-arch {
bottom:var(--vm-arch-floor-bottom) !important;
background-position:center bottom !important;
background-size:100% 100% !important;
}
/* In compact windows, keep the doorway grounded and allow vertical stretch.
This intentionally changes the bottom only; the top remains controlled by
the room geometry so the doorway stretches rather than simply moving. */
.museum[data-ui-scale="reduced"] .center-arch,
.museum[data-ui-scale="compact"] .center-arch {
bottom:var(--vm-arch-floor-bottom) !important;
}
/* v79: Center the room-type/alcove sign under the large title sign.
This targets the small sign that reads Category Room, Manufacturer Room,
Country Hall, Year Hall, etc. It remains centered relative to the big sign
at every responsive scale. */
.room-title .room-number,
.room-number {
left:50% !important;
min-width:210px !important;
width:max-content !important;
max-width:360px !important;
margin-left:0 !important;
transform:translateX(-50%) !important;
text-align:center !important;
box-sizing:border-box !important;
}
.room-title {
text-align:center !important;
}
/* v82: Single canonical fixture art.
All fixture views now use assets/fixture.jpg instead of the former four PNG files. */
.museum[data-stop-kind="alcove"] .left-wall .mockup-cabinet,
.museum[data-stop-kind="alcove"] .right-wall .mockup-cabinet,
.museum[data-stop-kind="alcove"].look-center .left-wall .mockup-cabinet,
.museum[data-stop-kind="alcove"].look-center .right-wall .mockup-cabinet,
.museum[data-stop-kind="alcove"].look-left .left-wall .mockup-cabinet,
.museum[data-stop-kind="alcove"].look-left .right-wall .mockup-cabinet,
.museum[data-stop-kind="alcove"].look-right .left-wall .mockup-cabinet,
.museum[data-stop-kind="alcove"].look-right .right-wall .mockup-cabinet {
background-image:url("fixture.jpg") !important;
background-repeat:no-repeat !important;
background-position:center center !important;
background-size:100% 100% !important;
}
/* v83: Item hover quick preview
This preview is intentionally pointer-events:none so it can never block a
click on the item tile. Clicking still opens the full item detail modal. */
.item-hover-preview {
position:fixed;
z-index:9999;
width:260px;
max-width:30vw;
pointer-events:none;
opacity:1;
transform:translateZ(0);
transition:opacity .08s ease-out;
}
.item-hover-preview.hidden {
opacity:0;
visibility:hidden;
}
.item-hover-preview-inner {
background:rgba(8,7,6,.96);
border:1px solid #b78637;
box-shadow:0 14px 34px rgba(0,0,0,.72), inset 0 0 24px rgba(183,134,55,.08);
padding:10px;
color:#f5d58f;
text-align:center;
}
.item-hover-preview img {
display:block;
max-width:100%;
max-height:260px;
margin:0 auto 8px;
object-fit:contain;
background:#fff;
border:1px solid rgba(183,134,55,.75);
box-sizing:border-box;
}
.item-hover-preview-title {
font-family:Georgia,'Times New Roman',serif;
font-size:14px;
line-height:1.2;
color:#ffe7ac;
margin:2px 0 3px;
}
.item-hover-preview-hint {
font-family:Arial,Helvetica,sans-serif;
font-size:10px;
line-height:1.2;
letter-spacing:.03em;
text-transform:uppercase;
color:#c9a65c;
}
@media (max-width:900px) {
.item-hover-preview {
width:210px;
max-width:40vw;
}
.item-hover-preview img {
max-height:210px;
}
}
/* v84: Optional item metadata in hover previews. */
.item-hover-preview-meta {
margin:5px 0 6px;
padding-top:5px;
border-top:1px solid rgba(183,134,55,.35);
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
line-height:1.28;
color:#e7d0a0;
text-align:left;
}
.item-hover-preview-meta:empty {
display:none;
}
.item-hover-preview-meta div {
margin:2px 0;
}
.item-hover-preview-meta strong {
color:#f5d58f;
font-weight:700;
}
/* v85: Fixed museum-position hover preview.
It no longer follows the cursor. It overlays the arched doorway area:
center when looking forward, left when looking right, right when looking left.
Pointer events remain disabled so item clicking is unaffected. */
.item-hover-preview {
left:auto !important;
top:50% !important;
right:auto !important;
bottom:auto !important;
pointer-events:none !important;
transform:translate(-50%, -50%) !important;
}
.item-hover-preview.hover-center {
left:50% !important;
}
.item-hover-preview.hover-left {
left:34% !important;
}
.item-hover-preview.hover-right {
left:66% !important;
}
.item-hover-preview.hidden {
opacity:0 !important;
visibility:hidden !important;
}
@media (max-width:1050px) {
.item-hover-preview.hover-left {
left:28% !important;
}
.item-hover-preview.hover-right {
left:72% !important;
}
}
/* v86: Corrected hover preview placement.
Forward view: center screen, below the main sign and above the Gallery Map oval.
Looking left: right side, centered between the left-facing fixture and window edge.
Looking right: left side, centered between the right-facing fixture and window edge. */
.item-hover-preview {
pointer-events:none !important;
width:280px !important;
max-width:28vw !important;
transform:translate(-50%, -50%) !important;
}
.item-hover-preview.hover-center {
left:50% !important;
top:42% !important;
}
.item-hover-preview.hover-left {
left:22% !important;
top:50% !important;
}
.item-hover-preview.hover-right {
left:78% !important;
top:50% !important;
}
@media (max-width:1250px) {
.item-hover-preview {
width:240px !important;
max-width:32vw !important;
}
.item-hover-preview.hover-left {
left:20% !important;
}
.item-hover-preview.hover-right {
left:80% !important;
}
}
@media (max-width:950px) {
.item-hover-preview {
width:210px !important;
max-width:36vw !important;
}
.item-hover-preview.hover-center {
top:43% !important;
}
.item-hover-preview.hover-left {
left:18% !important;
}
.item-hover-preview.hover-right {
left:82% !important;
}
}
/* v87: Image protection overlays and hover photo count.
These rules deter normal right-click/open/drag actions inside the UI. */
.protected-image-wrap {
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
max-width:100%;
max-height:100%;
width:100%;
height:100%;
user-select:none;
-webkit-user-select:none;
-webkit-touch-callout:none;
}
.protected-image-wrap img {
user-select:none;
-webkit-user-select:none;
-webkit-user-drag:none;
pointer-events:none;
}
.image-protect-cover {
position:absolute;
inset:0;
z-index:3;
display:block;
background:rgba(255,255,255,0.001);
pointer-events:auto;
user-select:none;
-webkit-user-select:none;
-webkit-touch-callout:none;
}
.item-img .protected-image-wrap img,
.item-hover-preview .protected-image-wrap img,
.artifact-main-frame .protected-image-wrap img {
max-width:100%;
max-height:100%;
object-fit:contain;
}
.item-hover-preview-photos {
margin:5px 0 6px;
padding-top:5px;
border-top:1px solid rgba(183,134,55,.35);
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
line-height:1.2;
color:#f5d58f;
text-align:center;
letter-spacing:.04em;
text-transform:uppercase;
}
.item-hover-preview-photos:empty {
display:none;
}
/* v90: End-of-hall doorway graphic.
Only the final kiosk/end-of-hall stop uses the closed/deeper hallway artwork.
Entrance and alcove stops continue to use the standard arch doorway art. */
.museum[data-arch-state="closed"] .center-arch {
background-image:url("arch_doorway_closed.png") !important;
background-repeat:no-repeat !important;
background-position:center bottom !important;
background-size:100% 100% !important;
}
.end-hall-doorway-graphic {
position:absolute;
inset:0;
pointer-events:none;
}
.museum[data-arch-state="closed"] .center-arch .doorway-depth,
.museum[data-arch-state="closed"] .center-arch .arch-navigation-sign {
display:none !important;
}
/* v91: One-room-before-end doorway graphic.
The final alcove before the kiosk/end-of-hall uses arch_doorway_2.png.
The kiosk/end-of-hall still uses arch_doorway_closed.png. */
.museum[data-arch-state="near-end"] .center-arch {
background-image:url("arch_doorway_2.png") !important;
background-repeat:no-repeat !important;
background-position:center bottom !important;
background-size:100% 100% !important;
}
/* v92: Doorway graphics are visual state only.
data-stop-kind remains entrance/alcove/kiosk so fixture layout rules stay stable.
data-arch-state controls only the arch artwork. */
.museum[data-arch-state="normal"] .center-arch {
background-image:url("arch_doorway.png") !important;
background-repeat:no-repeat !important;
background-position:center bottom !important;
background-size:100% 100% !important;
}
.museum[data-arch-state="near-end"] .center-arch {
background-image:url("arch_doorway_2.png") !important;
background-repeat:no-repeat !important;
background-position:center bottom !important;
background-size:100% 100% !important;
}
.museum[data-arch-state="closed"] .center-arch {
background-image:url("arch_doorway_closed.png") !important;
background-repeat:no-repeat !important;
background-position:center bottom !important;
background-size:100% 100% !important;
}
/* The final real alcove remains an alcove for fixture rendering even though it
receives the near-end doorway art. Reassert the alcove fixture styling hooks. */
.museum[data-stop-kind="alcove"][data-arch-state="near-end"] .left-wall .mockup-cabinet,
.museum[data-stop-kind="alcove"][data-arch-state="near-end"] .right-wall .mockup-cabinet {
background-image:url("fixture.jpg") !important;
}
/* v97: Arrow navigation pad under Gallery Map.
Replaces text Back/Forward/Previous/Enter buttons with a keyboard-style
arrow cluster that both indicates and performs available movement. */
.arrow-walk-controls {
width:260px !important;
margin-left:-130px !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
pointer-events:auto !important;
}
.arrow-walk-status {
display:block !important;
width:100% !important;
padding:10px 12px !important;
background:rgba(8,7,5,.92) !important;
border:1px solid #a8792d !important;
box-shadow:0 8px 22px rgba(0,0,0,.62) !important;
color:#f0d08c !important;
text-align:center !important;
box-sizing:border-box !important;
}
.arrow-walk-status strong {
display:block !important;
font-family:Georgia,'Times New Roman',serif !important;
font-size:15px !important;
line-height:1.1 !important;
color:#ffe2a0 !important;
margin-bottom:3px !important;
}
.arrow-walk-status span#walkHint {
display:block !important;
font-family:Arial,Helvetica,sans-serif !important;
font-size:10px !important;
line-height:1.2 !important;
color:#c7aa72 !important;
margin-bottom:7px !important;
}
.arrow-pad {
display:grid !important;
grid-template-columns:34px 34px 34px !important;
grid-template-rows:30px 30px 30px !important;
gap:4px !important;
justify-content:center !important;
align-items:center !important;
margin:0 auto !important;
}
.nav-arrow {
width:34px !important;
height:30px !important;
min-width:0 !important;
padding:0 !important;
border:1px solid #b8893e !important;
background:linear-gradient(#2b2115,#120d08) !important;
color:#ffe1a0 !important;
border-radius:4px !important;
font-size:18px !important;
line-height:1 !important;
font-family:Arial,Helvetica,sans-serif !important;
cursor:pointer !important;
box-shadow:inset 0 0 8px rgba(255,220,140,.08), 0 2px 7px rgba(0,0,0,.45) !important;
}
.nav-arrow:hover:not(:disabled) {
background:linear-gradient(#46331b,#1b1209) !important;
}
.nav-arrow.disabled,
.nav-arrow:disabled {
opacity:.28 !important;
cursor:default !important;
color:#8f7650 !important;
border-color:#5f4927 !important;
box-shadow:none !important;
}
.nav-arrow-center {
display:block !important;
width:34px !important;
height:30px !important;
}
/* Remove legacy side buttons if browser cache ever retains old markup. */
.walk-controls > button {
display:none !important;
}
/* v98: Floating arrow keys only.
Removes the framed walk-status box and Alcove text from the navigation control.
The keys float below the Gallery Map oval in a smaller footprint. */
.arrow-walk-controls {
width:116px !important;
margin-left:-58px !important;
bottom:8px !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
transform:scale(var(--vm-ui-scale)) !important;
transform-origin:bottom center !important;
pointer-events:auto !important;
}
.floating-arrow-pad,
.arrow-pad.floating-arrow-pad {
display:grid !important;
grid-template-columns:24px 24px 24px !important;
grid-template-rows:22px 22px 22px !important;
gap:3px !important;
justify-content:center !important;
align-items:center !important;
margin:0 auto !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
.floating-arrow-pad .nav-arrow,
.arrow-pad.floating-arrow-pad .nav-arrow {
width:24px !important;
height:22px !important;
min-width:0 !important;
padding:0 !important;
border:1px solid rgba(184,137,62,.86) !important;
background:rgba(15,11,7,.76) !important;
color:#ffe1a0 !important;
border-radius:3px !important;
font-size:14px !important;
line-height:1 !important;
box-shadow:0 2px 6px rgba(0,0,0,.45) !important;
}
.floating-arrow-pad .nav-arrow:hover:not(:disabled) {
background:rgba(52,38,20,.86) !important;
}
.floating-arrow-pad .nav-arrow.disabled,
.floating-arrow-pad .nav-arrow:disabled {
opacity:.24 !important;
color:#7e6a48 !important;
border-color:rgba(95,73,39,.7) !important;
background:rgba(12,9,6,.38) !important;
}
.floating-arrow-pad .nav-arrow-center {
width:24px !important;
height:22px !important;
}
.arrow-walk-status {
display:contents !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
.arrow-walk-status strong,
.arrow-walk-status span#walkHint {
display:none !important;
}
.museum[data-ui-scale="reduced"] .walk-controls,
.museum[data-ui-scale="compact"] .walk-controls {
bottom:6px !important;
}
/* v102: Swap Gallery Map and arrow key vertical positions.
The Gallery Map oval moves down into the former arrow-key location.
The floating arrow keys move above the oval. */
.gallery-map-medallion,
.floor-medallion {
bottom:8px !important;
transform:scale(var(--vm-ui-scale)) !important;
transform-origin:bottom center !important;
}
.arrow-walk-controls {
bottom:76px !important;
}
.museum[data-ui-scale="reduced"] .gallery-map-medallion,
.museum[data-ui-scale="compact"] .gallery-map-medallion,
.museum[data-ui-scale="reduced"] .floor-medallion,
.museum[data-ui-scale="compact"] .floor-medallion {
bottom:6px !important;
}
.museum[data-ui-scale="reduced"] .walk-controls,
.museum[data-ui-scale="compact"] .walk-controls {
bottom:68px !important;
}
/* v103: Raise floating arrow keys.
The v102 swap put the keys too close to the Gallery Map oval. This lifts
the arrow cluster so it sits above the oval with visible separation. */
.arrow-walk-controls {
bottom:118px !important;
}
.museum[data-ui-scale="reduced"] .walk-controls {
bottom:104px !important;
}
.museum[data-ui-scale="compact"] .walk-controls {
bottom:96px !important;
}
/* v104: Raise floating arrow keys higher.
The v103 position still sat too close to the Gallery Map oval. This moves
the arrow cluster farther up the doorway area while leaving the map oval low. */
.arrow-walk-controls {
bottom:158px !important;
}
.museum[data-ui-scale="reduced"] .walk-controls {
bottom:140px !important;
}
.museum[data-ui-scale="compact"] .walk-controls {
bottom:126px !important;
}
/* v105 - header copyright */
.vm-copyright{
font-size:11px;
line-height:1.1;
color:#c8a86a;
opacity:.9;
margin-top:2px;
letter-spacing:.4px;
}
/* v106 visible copyright under logo */
.vm-copyright{
display:block !important;
position:absolute;
left:18px;
top:52px;
color:#cda35a;
font-size:12px;
font-weight:600;
z-index:9999;
white-space:nowrap;
}
/* v107: visible copyright inside the actual header brand block. */
.vm-brand {
align-items:center !important;
}
.vm-brand-text {
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
line-height:1 !important;
}
.vm-brand-text strong {
display:block !important;
}
.vm-brand-text .vm-copyright,
.vm-copyright {
display:block !important;
position:static !important;
margin-top:4px !important;
color:#cda35a !important;
font-size:11px !important;
font-weight:600 !important;
line-height:1.05 !important;
letter-spacing:.6px !important;
opacity:.95 !important;
white-space:nowrap !important;
z-index:auto !important;
}