.photo-view{width:100%;height:100%;position:relative;overflow:hidden}.building-photo{width:100%;height:100%;object-fit:cover;object-position:center bottom;transition:transform .6s ease-in-out}.building-photo.flipping{animation:flip3d .1s ease-in-out}@keyframes flip3d{0%{opacity:1}50%{opacity:0}to{opacity:1}}.title-overlay{position:absolute;top:30px;left:50%;transform:translate(-50%);text-align:center;color:#fff;text-shadow:2px 2px 8px rgba(0,0,0,.8);z-index:10;pointer-events:none}.title-overlay h1{font-size:2.5rem;margin:0;font-family:var(--font-heading);font-weight:var(--font-weight-extrabold);letter-spacing:.5px}.title-overlay p{font-size:1.1rem;margin:10px 0 0;opacity:.9;font-family:var(--font-body);font-weight:var(--font-weight-regular)}.photo-view{cursor:grab;-webkit-user-select:none;user-select:none}.photo-view.dragging{cursor:grabbing}.turn-indicator{position:absolute;bottom:-50px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:10;pointer-events:none}.turn-icon{width:250px;height:250px;color:#ffffffbf;filter:drop-shadow(0 3px 6px rgba(0,0,0,.3));transform:scaleY(.2) scaleX(1.8);animation:float 2s ease-in-out infinite}@keyframes float{0%,to{transform:scaleY(.2) scaleX(1.8) translateY(0)}50%{transform:scaleY(.2) scaleX(1.8) translateY(-8px)}}.turn-hint{font-size:.75rem;color:#ffffffe6;text-shadow:0 1px 3px rgba(0,0,0,.5);font-family:var(--font-body)}.hotspot{position:absolute;transform:translate(-50%,-50%);cursor:pointer;z-index:100;transition:all .3s ease}.hotspot-dot{width:30px;height:30px;background:#00bd70e6;border-radius:50%;box-shadow:0 0 20px #00bd70cc,0 0 40px #00bd7066;position:relative;z-index:2;transition:all .3s ease}.hotspot:hover .hotspot-dot{transform:scale(1.2);background:#00bd70;box-shadow:0 0 30px #00bd70,0 0 60px #00bd7099}.hotspot-pulse{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30px;height:30px;background:#00bd7066;border-radius:50%;animation:pulse 2s ease-out infinite;z-index:1}@keyframes pulse{0%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,-50%) scale(3);opacity:0}}.hotspot-label{position:absolute;bottom:50px;left:50%;transform:translate(-50%);background:#25303bf2;color:#fff;padding:15px 20px;border-radius:10px;min-width:250px;text-align:center;box-shadow:0 4px 20px #00000080;animation:fadeIn .3s ease;white-space:nowrap}.hotspot-label h3{margin:0 0 5px;font-size:1.1rem;color:#00bd70}.hotspot-label p{margin:0 0 8px;font-size:.9rem;opacity:.9}.click-hint{font-size:.85rem;color:#03a3e8;font-weight:600}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(hover:none){.hotspot-dot{width:50px;height:50px}.hotspot-label{min-width:300px;padding:20px 25px}}@media(max-width:1024px){.hotspot-dot,.hotspot-pulse{width:24px;height:24px}.hotspot-label{min-width:200px;padding:12px 15px;bottom:40px}.hotspot-label h3{font-size:1rem}.hotspot-label p{font-size:.8rem}.title-overlay h1{font-size:1.8rem}.title-overlay p{font-size:.9rem}}@media(max-width:768px){.hotspot-dot,.hotspot-pulse{width:20px;height:20px}.hotspot-label{min-width:160px;padding:10px 12px;bottom:35px;white-space:normal}.hotspot-label h3{font-size:.9rem}.hotspot-label p,.click-hint{font-size:.75rem}.title-overlay{top:15px}.title-overlay h1{font-size:1.4rem}.title-overlay p{font-size:.8rem}.turn-icon{width:150px;height:150px}}@media(max-width:480px){.hotspot-dot,.hotspot-pulse{width:16px;height:16px}.hotspot-label{min-width:140px;padding:8px 10px;bottom:30px}.hotspot-label h3{font-size:.8rem}.hotspot-label p{font-size:.7rem;margin-bottom:4px}.title-overlay h1{font-size:1.1rem}.title-overlay p{font-size:.7rem}}.visualization-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000f2;z-index:1000;animation:fadeIn .3s ease}.visualization-container{width:100%;height:100%;position:relative}.visualization-container canvas{width:100%!important;height:100%!important;display:block}.info-panel{position:absolute;top:20px;right:20px;background:#25303bf2;color:#fff;padding:25px;border-radius:15px;max-width:350px;box-shadow:0 8px 32px #00000080;border:2px solid rgba(0,189,112,.3)}.info-panel h2{margin:0 0 20px;font-size:1.5rem;font-family:var(--font-heading);font-weight:var(--font-weight-extrabold);color:#00bd70;border-bottom:2px solid rgba(0,189,112,.3);padding-bottom:10px}.info-content{display:flex;flex-direction:column;gap:15px;margin-bottom:15px}.info-item{display:flex;align-items:flex-start;gap:10px}.info-item .icon{font-size:1.5rem;flex-shrink:0}.info-item strong{color:#03a3e8;font-family:var(--font-heading);font-weight:var(--font-weight-extrabold)}.info-item div{font-family:var(--font-body);font-weight:var(--font-weight-regular)}.instruction{margin:15px 0 0;padding-top:15px;border-top:1px solid rgba(255,255,255,.2);font-size:.9rem;opacity:.7;text-align:center}.close-button{position:absolute;top:20px;left:20px;background:#00bd70e6;color:#fff;border:none;padding:15px 30px;font-size:1.1rem;font-family:var(--font-heading);font-weight:var(--font-weight-extrabold);border-radius:10px;cursor:pointer;box-shadow:0 4px 15px #00bd7066;transition:all .3s ease}.close-button:hover{background:#00bd70;transform:translateY(-2px);box-shadow:0 6px 20px #00bd7099}.close-button:active{transform:translateY(0)}.sidebar{position:relative;width:420px;height:calc(100vh - 16px);background:linear-gradient(180deg,#25303b,#3e464b);color:#fff;padding:30px;display:flex;flex-direction:column;box-shadow:0 10px 40px #0000004d;z-index:500;overflow-y:auto;border-radius:25px;border:2px solid rgba(0,189,112,.2)}.sidebar-logo{width:100%;margin-bottom:0;display:flex;justify-content:center;align-items:center;padding:20px 15px 0}.sidebar-logo img{max-width:100%;max-height:120px;object-fit:contain}.sidebar-header{margin-bottom:30px;margin-top:0;border-bottom:2px solid #00BD70;padding-bottom:20px}.sidebar-title{margin:0;font-size:2rem;font-family:var(--font-heading);font-weight:var(--font-weight-extrabold);color:#00bd70;text-transform:uppercase;letter-spacing:1px}.sidebar-subtitle{margin:8px 0 0;font-size:.95rem;color:#94a2ae;font-family:var(--font-body);font-weight:var(--font-weight-regular);text-align:center}.instructions-section{margin-bottom:25px;padding:20px;background:#03a3e81a;border-radius:12px;border:1px solid rgba(3,163,232,.3)}.instructions-title{margin:0 0 10px;font-size:1.1rem;color:#03a3e8;font-family:var(--font-heading);font-weight:var(--font-weight-extrabold);text-transform:uppercase;letter-spacing:.5px}.instructions-text{margin:0;font-size:1rem;color:#94a2ae;font-family:var(--font-body);font-weight:var(--font-weight-regular);line-height:1.6}.progress-section{margin-bottom:30px;padding:22px;background:#0003;border-radius:12px;border:1px solid rgba(0,189,112,.2)}.progress-text{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.progress-label{font-size:1rem;color:#94a2ae;font-weight:500}.progress-count{font-size:1.4rem;font-weight:700;color:#00bd70}.progress-bar-container{width:100%;height:12px;background:#0000004d;border-radius:6px;overflow:hidden;position:relative}.progress-bar-fill{height:100%;background:linear-gradient(90deg,#00bd70,#03a3e8);border-radius:6px;transition:width .6s ease;box-shadow:0 0 10px #00bd7080}.features-list{flex:1;margin-bottom:20px}.features-title{font-size:1.1rem;color:#03a3e8;margin:0 0 15px;text-transform:uppercase;font-family:var(--font-heading);font-weight:var(--font-weight-extrabold);letter-spacing:.5px}.features-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.feature-item{display:flex;align-items:center;gap:10px;padding:12px;border-radius:8px;transition:all .3s ease}.feature-item.discovered{background:#00bd7026;border:1px solid rgba(0,189,112,.3)}.feature-item.locked{background:#0003;border:1px solid rgba(255,255,255,.1)}.feature-icon{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;flex-shrink:0}.feature-item.discovered .feature-icon{background:#00bd70;color:#fff;box-shadow:0 0 10px #00bd7080}.feature-item.locked .feature-icon{background:#94a2ae4d;color:#94a2ae}.feature-name{font-size:.85rem;font-family:var(--font-body);font-weight:var(--font-weight-regular);line-height:1.3}.feature-item.discovered .feature-name{color:#fff}.feature-item.locked .feature-name{color:#94a2ae;font-style:italic}.restart-button{width:100%;padding:12px;background:#03a3e826;color:#03a3e8;border:1px solid rgba(3,163,232,.3);border-radius:8px;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .3s ease;margin-top:auto}.restart-button:hover{background:#03a3e840;border-color:#03a3e880}.restart-button:active{transform:translateY(1px)}.sidebar::-webkit-scrollbar{width:8px}.sidebar::-webkit-scrollbar-track{background:#0003}.sidebar::-webkit-scrollbar-thumb{background:#00bd7080;border-radius:4px}.sidebar::-webkit-scrollbar-thumb:hover{background:#00bd70b3}@media(max-width:1024px){.sidebar{width:100%;height:auto;max-height:45vh;padding:20px;border-radius:15px}.sidebar-title{font-size:1.6rem}.sidebar-logo img{max-height:80px}.features-grid{grid-template-columns:1fr 1fr;gap:8px}.feature-item{padding:10px}}@media(max-width:768px){.sidebar{padding:15px;border-radius:12px}.sidebar-header{margin-bottom:15px;padding-bottom:15px}.sidebar-title{font-size:1.3rem}.sidebar-subtitle{font-size:.85rem}.sidebar-logo img{max-height:60px}.instructions-section{margin-bottom:15px;padding:12px}.instructions-title{font-size:.95rem}.instructions-text{font-size:.85rem}.progress-section{margin-bottom:15px;padding:15px}.features-grid{grid-template-columns:1fr;gap:6px}.feature-item{padding:8px}.feature-icon{width:22px;height:22px;font-size:.75rem}.feature-name{font-size:.8rem}}@media(max-width:480px){.sidebar{padding:12px;max-height:40vh}.sidebar-title,.progress-count{font-size:1.1rem}}.completion-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .3s ease}.completion-modal{background:linear-gradient(135deg,#25303b,#3e464b);border-radius:20px;padding:40px;max-width:550px;width:90%;box-shadow:0 20px 60px #00000080;border:2px solid #00BD70;animation:slideUp .5s ease;position:relative;overflow:hidden}.completion-modal:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#00bd70,#03a3e8)}.completion-header{text-align:center;margin-bottom:30px}.celebration-icon{font-size:4rem;margin-bottom:15px;animation:bounce 1s ease infinite}.completion-title{margin:0;font-size:2.2rem;font-family:var(--font-heading);font-weight:var(--font-weight-extrabold);color:#00bd70;text-transform:uppercase;letter-spacing:1px}.completion-content{text-align:center;color:#fff;margin-bottom:30px}.completion-message{font-size:1.3rem;font-family:var(--font-heading);font-weight:var(--font-weight-extrabold);margin:0 0 15px;color:#fff}.completion-subtitle{font-size:1rem;font-family:var(--font-body);font-weight:var(--font-weight-regular);color:#94a2ae;line-height:1.6;margin:0 0 30px}.breeam-section{display:flex;justify-content:center;margin:30px 0}.breeam-badge{text-align:center}.breeam-logo{width:160px;height:160px;margin:0 auto 15px;background:linear-gradient(135deg,#00bd70,#03a3e8);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 10px 30px #00bd7066;border:4px solid white;animation:glow 2s ease-in-out infinite}.breeam-text{font-size:2rem;font-weight:900;color:#fff;letter-spacing:2px}.breeam-rating{font-size:1.2rem;font-weight:600;color:#fff;margin-top:5px;text-transform:uppercase}.breeam-description{margin:0;font-size:.95rem;color:#94a2ae;font-family:var(--font-body);font-weight:var(--font-weight-regular)}.completion-stats{display:flex;justify-content:space-around;margin:30px 0 20px;padding:20px;background:#0000004d;border-radius:12px}.stat-item{text-align:center}.stat-value{font-size:2rem;font-weight:700;color:#00bd70;margin-bottom:5px}.stat-label{font-size:.85rem;color:#94a2ae;text-transform:uppercase;letter-spacing:.5px}.completion-actions{display:flex;gap:15px;margin-top:30px}.completion-button{flex:1;padding:15px 30px;border:none;border-radius:10px;font-size:1rem;font-family:var(--font-heading);font-weight:var(--font-weight-extrabold);cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px}.completion-button.restart{background:#00bd70;color:#fff;box-shadow:0 4px 15px #00bd7066}.completion-button.restart:hover{background:#00d682;transform:translateY(-2px);box-shadow:0 6px 20px #00bd7099}.completion-button.close{background:transparent;color:#03a3e8;border:2px solid #03A3E8}.completion-button.close:hover{background:#03a3e81a;transform:translateY(-2px)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes glow{0%,to{box-shadow:0 10px 30px #00bd7066}50%{box-shadow:0 10px 40px #00bd70cc}}.app-container{width:100vw;height:100vh;position:relative;overflow:hidden;display:flex;padding:8px;gap:8px}.main-content{flex:1;position:relative;display:flex;align-items:center;justify-content:center;padding:8px}.building-frame{width:100%;height:100%;background:transparent;border-radius:20px;overflow:hidden;position:relative}@media(max-width:1024px){.app-container{flex-direction:column;padding:4px;gap:4px}.main-content{flex:1;min-height:50vh;padding:4px}}@media(max-width:768px){.app-container{padding:2px;gap:2px}.main-content{padding:2px}.building-frame{border-radius:12px}}@font-face{font-family:Panton;src:url(/fonts/Panton-Regular.otf) format("opentype");font-weight:400;font-style:normal}@font-face{font-family:Panton;src:url(/fonts/Panton-ExtraBold.otf) format("opentype");font-weight:800;font-style:normal}:root{--font-heading: "Panton", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-body: "Panton", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-weight-regular: 400;--font-weight-extrabold: 800}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;font-family:var(--font-body);font-weight:var(--font-weight-regular);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:var(--font-weight-extrabold)}#root{width:100vw;height:100vh;background:linear-gradient(135deg,#1a1f26,#25303b,#2a3740)}