/* КормимПтиц! — v3: immersive architectural dashboard, reference-matched layout.
   All interactive content remains real HTML rather than painted into an image. */
:root {--night:#061b2a;--night-card:rgba(7,27,40,.90);--warm:#ffdda4;--line:rgba(227,239,240,.24)}
html {background:var(--night);scroll-padding-top:90px}
body {background:var(--night);color:#eef5f5}
.site-header {height:84px;padding:0 clamp(18px,2.2vw,38px);position:absolute;z-index:40;background:linear-gradient(180deg,#0d2542aa 0%,#0d254233 86%,transparent);border:0;gap:12px}
.brand {min-width:255px;gap:9px}.brand-icon-svg {height:68px;width:68px}.brand-text strong {font-size:clamp(19px,1.9vw,30px);letter-spacing:-.7px}.brand-text small {font-size:11px;letter-spacing:0;color:#e1eaf4;display:block!important}
.top-nav {gap:3px;justify-content:center}.nav-link {font-size:12px;color:#f6fbff;font-weight:500;padding:11px 11px;white-space:nowrap}.nav-link.active{color:#ffe1ad;background:transparent;border-bottom:2px solid #f5d6a0;border-radius:0}.nav-link:hover{color:#ffe1ad}
.header-actions {gap:8px}.live-marker {display:none}.ghost.account {padding:11px 18px}.top-cta {padding:13px 19px;font-size:11px;border-radius:32px}
.experience{height:clamp(630px,72.5svh,850px);min-height:630px;background:#122d43}.scene{background:#17334a url('/static/residence_ambient.webp') center/cover no-repeat;overflow:hidden}
.scene:before {background:linear-gradient(180deg,#0e2a4388 0%,transparent 24%,#0f213010 60%,#07162299 100%),linear-gradient(90deg,#061a2970,transparent 27%,transparent 71%,#04132047);z-index:2}
.scene:after {background:radial-gradient(ellipse at 45% 70%,#e9b8711f,transparent 62%);z-index:0;opacity:.6}
.scene-transform {height:min(87%,745px);width:calc(min(87%,745px) * 1.07365);top:54%;left:48%;z-index:1;filter:drop-shadow(0 16px 23px #03141c5c)}
.facade-photo{filter:brightness(1.03) saturate(1.07);transition:filter 1.5s ease}
.scene[data-time="morning"] .facade-photo{filter:brightness(1.16) sepia(.08) saturate(1.05)}
.scene[data-time="day"] .facade-photo{filter:brightness(1.33) saturate(.82) contrast(.94)}
.scene[data-time="evening"] .facade-photo{filter:brightness(1.02) saturate(1.07)}
.scene[data-time="night"] .facade-photo{filter:brightness(.58) saturate(.84) contrast(1.14)}
.scene.is-night:before{background:linear-gradient(180deg,#031527dd 0%,#04142555 48%,#030f1de0),linear-gradient(90deg,#06111daa,transparent 40%,#06111d80)}
.hotspot{width:4.05%;height:4.45%;border:1px solid transparent!important;border-radius:3px;background:transparent!important;box-shadow:none!important;z-index:5;outline-offset:3px}
.hotspot:not(.selected):not(.is-occupied):not(:hover){opacity:.15}
.hotspot.is-occupied{border:2px solid #f2bc67bb!important;box-shadow:0 0 13px #ffd19088,0 0 2px #ffebbc inset!important;background:#d6a65620!important}
.hotspot.selected,.hotspot:hover,.hotspot:focus-visible{border:2px solid #9bdcf5!important;box-shadow:0 0 0 5px #93cfff33,0 0 19px #abd9ff!important;background:#a9daff29!important;opacity:1}
.scene-toolbar{top:105px;left:auto;right:min(480px,34vw);padding:6px 9px;border-radius:15px;gap:12px;background:#091f30cb;max-width:280px;z-index:16}.building-identity>span:nth-child(2){font-size:10px}.building-identity small{font-size:9px}.scene-btn{padding:8px 10px;min-width:55px;font-size:10px}
/* The building card from the original visual reference */
.hero{position:absolute;z-index:18;top:108px;left:clamp(17px,2.3vw,40px);width:clamp(220px,18.8vw,292px);padding:17px 18px 12px;color:#eef5fb;display:block;border:1px solid #ffffff44;background:linear-gradient(138deg,#19354cb8,#0b2535bb);backdrop-filter:blur(18px);border-radius:18px;box-shadow:0 9px 33px #05192c66;transform:none!important;transition:opacity .35s}
.hero-content{display:grid;grid-template-columns:50px 1fr;column-gap:10px}.hero .house-icon{grid-row:span 3;font-size:36px;color:#f4d79e;line-height:1}.hero .eyebrow{font-size:13px;color:#fff;letter-spacing:.2px;font-weight:750;align-self:end}.hero h1{font-family:Arial,sans-serif;font-weight:450;font-size:11px!important;letter-spacing:.1px;margin:4px 0 0;line-height:1.3;color:#dbe4ed}.hero p{font-size:10px;line-height:1.35;margin:6px 0 0;color:#c2d1da;display:none}.hero-stats{display:block!important;margin:6px 0 0;border:0;padding:0;color:#e9eff4;font-size:11px}.hero-stats strong{font-size:13px;color:#fce0b1}.house-bar{background:#d5dbde30;border-radius:100px;overflow:hidden;height:7px;margin:13px 0 8px}.bar-fill{display:block;height:100%;width:0;background:#f6d9a1;border-radius:100px;transition:width .5s}.house-explore{position:absolute;bottom:11px;right:10px;color:#fff;background:#ffffff2b;border:1px solid #ffffff33;border-radius:99px;width:29px;height:29px;overflow:hidden;font-size:0;cursor:pointer}.house-explore span{font-size:17px}.house-explore:hover{background:#ffffff4b}.window-selected .hero{opacity:0!important;pointer-events:none}
.floor-rail{position:absolute;left:clamp(17px,2.3vw,40px);top:246px;z-index:15;background:#0a2336cd;border:1px solid #ffffff42;border-radius:18px;padding:12px 9px;display:flex;flex-direction:column;gap:5px;backdrop-filter:blur(18px);align-items:center;box-shadow:0 10px 32px #02101f61}
.floor-rail>span{color:#c7d6de;font-size:8px;letter-spacing:1px}.floor-rail button{width:28px;height:28px;padding:0;border-radius:50%;background:#dce8f012;color:#f1f5fa;border:1px solid #ffffff19;font-size:11px;cursor:pointer}.floor-rail button:hover,.floor-rail button.current{background:#ffe1ad;color:#152c35;border-color:#ffe1ad;box-shadow:0 0 12px #eec9855c}
.time-bar{position:absolute;bottom:19px;left:49%;transform:translateX(-50%);z-index:15;display:flex;align-items:center;gap:4px;padding:6px;border:1px solid #e8e6db9e;background:#0c2532c9;backdrop-filter:blur(15px);border-radius:40px;box-shadow:0 9px 30px #030b1866}
.time-bar button{border:0;background:transparent;color:#c9d7de;font-size:12px;border-radius:30px;padding:9px 14px;cursor:pointer;white-space:nowrap}.time-bar button.current,.time-bar button:hover{background:#f2c77831;color:#ffdfa6}
.scene-bottom{left:auto;right:calc(430px + 40px);bottom:22px;padding:5px 6px;z-index:15;background:#0b2434b5;box-shadow:0 5px 25px #04132580}.stage-legend{display:none}.zoom-tools{background:transparent}.zoom-tools input{width:58px}.zoom-tools button{width:26px;height:26px}
.sky-note{display:none}.detail-panel{top:105px;right:clamp(17px,1.75vw,33px);width:clamp(355px,28vw,438px);height:calc(100% - 126px);max-height:660px;min-height:0;padding:18px 17px 15px;color:#e7eef2;background:linear-gradient(155deg,#132b3bcf,#071a2adf);border:1px solid #b2c7cc7a;border-radius:18px;box-shadow:0 13px 42px #0414238f;opacity:1;pointer-events:auto;transform:none!important;backdrop-filter:blur(22px)}
.detail-panel .panel-close{background:#ffffff1b;border-color:#ffffff51;color:#eff6f7;width:29px;height:29px}.detail-panel .panel-eyebrow{color:#173143;background:#ffe3b2;padding:8px 10px;border-radius:50px;font-size:10px;font-weight:800}.detail-panel .pill{background:transparent;color:#87d99d;border:0;font-size:10px}.detail-panel .pill.free{color:#ecdaab}.detail-panel h2{font-family:Arial,sans-serif;font-size:19px;font-weight:800;letter-spacing:0;margin:14px 0 7px;color:#fff}.detail-panel .detail-lead{color:#cbd9df;font-size:11px;margin-bottom:10px}.detail-panel .bird-preview{height:clamp(180px,22vh,240px);border-radius:13px;overflow:hidden;background:#1a3748}.detail-panel .bird-preview img{width:100%;height:100%;object-fit:cover}.detail-panel .photo-label{background:#091c2b9e;color:#f0f5f9}.detail-panel .panel-facts{gap:6px}.detail-panel .panel-facts>div{background:#ffffff0f;border:1px solid #ffffff19;color:#ecf5f5}.detail-panel .panel-facts label{color:#b2cbd1}.detail-panel .panel-facts b{color:#fff}.detail-panel .panel-note{color:#d9e5e8}.detail-panel .tiny-actions button{background:#ffffff15;border-color:#ffffff2e;color:#f4fafb}.detail-panel .tiny-actions button:hover{background:#ffe2b12d}.detail-panel .tiny-actions button.is-active{color:#ffdf9e}.detail-panel .view-counter{color:#bdd3da}.detail-panel .panel-subhead{color:#fff}.detail-panel .entry{background:#dbe8ed12;border-left-color:#e9c589}.detail-panel .entry p{color:#edf4f2}.detail-panel .entry time{color:#f7d8a3}.detail-panel .entry-birds{color:#d5e9cc}.detail-panel .comment-card{border-color:#ffffff29}.detail-panel .comment-person{color:#f4d99f}.detail-panel .comment-card p{color:#e5f0ef}.detail-panel .empty-illustration{background:#ffffff13;border-color:#ffffff40}.detail-panel .empty-illustration span{color:#d1e3e7}.detail-panel .panel-buttons .outline{background:#ffffff13;border-color:#ffffff50;color:#fff}.detail-panel .primary{background:linear-gradient(135deg,#ffe1aa,#eac18a)}
/* Initial panel is visible, including when there are zero feeders (empty-window onboarding). */
.experience:not(.detail-open) .detail-panel{opacity:1;pointer-events:auto;transform:none}.window-selected .hero{opacity:1}
/* Compact bottom tray: 3 ranking cards, share and shop, matching concept reference. */
.rank-section{display:grid;grid-template-columns:1fr 1fr 1fr 1.3fr .91fr;grid-template-rows:34px 147px;gap:10px;padding:12px clamp(17px,1.9vw,35px) 14px;background:#071b2b;border-top:1px solid #b5d4de30;color:#eff7fb;min-height:207px}
.rank-section-top{grid-column:1/4;grid-row:1;display:flex;align-items:center;justify-content:space-between;margin:0;padding:0 3px}.rank-section-top h2{font:700 18px Arial,sans-serif;color:white;margin:0}.rank-section-top .outline{padding:4px 7px;background:none;border:0;font-size:10px;color:#d5e0e8}
.rank-columns{display:contents}.rank-card{min-width:0;grid-row:2;border:1px solid #a8c2cc54;border-radius:13px;background:linear-gradient(140deg,#172f3bd9,#0b2130);padding:10px;box-shadow:none;overflow:hidden}.rank-card h3{color:#f5e4c9;font-size:11px;font-weight:800;margin:0 0 8px}.rank-list{gap:0}.rank-row{color:#fff;font-size:10px;padding:5px 0;min-height:0;gap:6px}.rank-row:not(:first-child){display:none}.rank-row:first-child{background:linear-gradient(0deg,#051521cc,#1c3e5066),url('/static/bird-woodpecker.webp') center/cover no-repeat;min-height:91px;padding:10px;border:1px solid #ffffff48;border-radius:10px;align-items:flex-end;box-shadow:inset 0 -45px 30px #0415259e}.rank-card:nth-child(2) .rank-row:first-child{background-image:linear-gradient(0deg,#061626cb,#1b384544),url('/static/bird-bullfinch.webp')}.rank-card:nth-child(3) .rank-row:first-child{background-image:linear-gradient(0deg,#061626cb,#1b384544),url('/static/bird-tits.webp')}.rank-row .rank-number{border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;color:#0e2530;background:#ffd792;width:23px;height:23px;min-width:23px}.rank-name b{color:white;font-size:11px;text-shadow:0 1px 3px #061425}.rank-name small{color:#f3ead6;font-size:9px}.rank-stat{color:#fff8e9;white-space:normal;max-width:65px;line-height:1.2;font-size:10px;text-align:right}.rank-empty{font-size:10px;line-height:1.6}
.compact-share{grid-column:4;grid-row:1/3;border:1px solid #c1d4dc55;border-radius:14px;background:linear-gradient(150deg,#112a3b,#0a1e2c);padding:13px 14px;min-width:0}.compact-share h3{font-size:15px;color:#fff;font-weight:800;margin:1px 0 7px}.compact-share p{font-size:10px;line-height:1.5;color:#d5e1e8;margin:0 0 10px}.social-buttons{display:flex;gap:7px;margin-bottom:10px}.social-buttons button{width:31px;height:31px;border:0;border-radius:50%;background:#269fe3;color:#fff;font-size:15px;font-weight:800;cursor:pointer}.social-buttons button:nth-child(2){background:#2876ca}.social-buttons button:nth-child(3){background:#ed912b}.social-buttons button:nth-child(4){background:transparent;border:1px solid #ffffffa9}.compact-share-cta{display:block;width:100%;border:0;border-radius:14px;padding:10px;font-weight:800;color:#24333a;background:#fce0ad;cursor:pointer;font-size:10px}
.compact-shop{grid-column:5;grid-row:1/3;position:relative;border:1px solid #b8d3de55;border-radius:14px;overflow:hidden;min-width:0;background:#193e51}.compact-shop:after{content:'';pointer-events:none;position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,#071e2af2 94%)}.compact-shop img{width:100%;height:100%;object-fit:cover;display:block}.compact-shop>div{position:absolute;z-index:2;bottom:9px;left:10px;right:10px;display:grid;gap:9px;text-align:center}.compact-shop strong{font-size:12px;line-height:1.35;color:#fff;text-shadow:0 1px 6px #071522}.compact-shop button{background:#f9d99b;border:0;border-radius:30px;padding:10px 8px;color:#203443;font-size:10px;font-weight:800;cursor:pointer}
.share-section{padding:26px clamp(17px,3vw,52px);background:#0f3543}.share-section h2{font-size:24px}.share-section .primary{box-shadow:none}
.below,.atlas,.steps{background:#edf2ee;color:#21413d}.footer{background:#071b2b;color:#b9d4dd;border-top:1px solid #ffffff19}.footer-brand strong{color:#f8db9e}.footer-brand p{color:#afcbd3}.footer-links button{color:#f8d99a}
@media(max-width:1250px){.brand{min-width:auto}.brand-icon-svg{width:52px;height:52px}.brand-text strong{font-size:19px}.brand-text small{font-size:9px}.nav-link{font-size:10px;padding:9px 7px}.header-actions .top-cta{font-size:10px;padding:12px}.detail-panel{width:345px}.scene-toolbar{right:380px}.scene-bottom{right:380px}.scene-transform{left:47%;height:min(85%,720px)}.rank-section{grid-template-columns:1fr 1fr 1fr 1.15fr .8fr;gap:8px}.compact-share{padding:10px}.compact-shop strong{font-size:10px}}
@media(max-width:980px){.site-header{height:72px;padding:0 15px}.top-nav{display:none}.header-actions .top-cta{display:block}.brand-icon-svg{height:48px;width:48px}.brand-text small{font-size:9px}.experience{height:clamp(625px,83svh,800px)}.scene-transform{height:min(78%,650px);width:calc(min(78%,650px) * 1.07365);top:56%;left:51%}.hero{top:88px;left:16px;width:212px;padding:12px}.scene-toolbar{top:88px;right:18px;width:auto}.detail-panel{top:160px;right:18px;width:330px;height:calc(100% - 188px)}.floor-rail{left:16px;top:246px}.scene-bottom{right:auto;left:18px;bottom:19px}.time-bar{left:50%;bottom:20px}.rank-section{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:31px 145px auto;gap:8px}.compact-share{grid-row:3;grid-column:1/3;min-height:165px}.compact-shop{grid-row:3;grid-column:3;min-height:165px}.rank-card{padding:8px}.rank-card h3{font-size:10px}.rank-row .rank-stat{display:none}}
@media(max-width:680px){.site-header{height:65px;padding:0 12px;background:#071f32cb}.brand{gap:5px}.brand-icon-svg{width:41px;height:41px}.brand-text strong{font-size:17px}.brand-text small{font-size:8px;white-space:normal}.ghost.account{font-size:10px;padding:8px 11px}.header-actions .top-cta{display:none}.experience{height:clamp(610px,100svh,860px);min-height:610px}.scene{background-position:center}.scene-transform{width:95vw;height:calc(95vw / 1.07365);top:50%;left:50%}.hero{top:77px;left:12px;width:185px;padding:10px 12px 9px;border-radius:12px}.hero-content{grid-template-columns:30px 1fr;gap:4px}.hero .house-icon{font-size:25px}.hero .eyebrow{font-size:11px}.hero h1{font-size:9px!important}.hero-stats{font-size:9px;padding:0}.hero-stats strong{font-size:11px}.house-bar{margin:8px 0 6px;height:5px}.house-explore{bottom:7px;right:7px;width:23px;height:23px}.floor-rail{left:10px;top:224px;gap:2px;padding:6px 4px;border-radius:13px}.floor-rail>span{font-size:7px}.floor-rail button{width:22px;height:22px;font-size:9px}.scene-toolbar{top:78px;right:10px;width:auto;padding:4px 6px}.building-identity{display:none}.scene-btn{min-width:45px;padding:7px 5px}.time-bar{left:50%;bottom:78px;max-width:calc(100% - 20px)}.time-bar button{font-size:9px;padding:8px 10px}.scene-bottom{bottom:15px;left:50%;right:auto;transform:translateX(-50%)}.zoom-tools input{width:52px}.detail-panel{position:fixed;inset:auto 0 0 0;width:100%;height:auto;max-height:79dvh;min-height:0;border-radius:22px 22px 0 0;padding:19px 17px 24px;background:linear-gradient(145deg,#102c3cf7,#071c2bf7);opacity:1;pointer-events:none;transform:translateY(105%)!important;z-index:105}.experience.detail-open .detail-panel{pointer-events:auto;transform:translateY(0)!important}.experience:not(.detail-open) .detail-panel{pointer-events:none;transform:translateY(105%)!important}.detail-panel .bird-preview{height:190px}.rank-section{padding:15px 12px;grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:10px}.rank-section-top{grid-column:1/3;grid-row:auto}.rank-card{grid-row:auto}.rank-card:nth-child(3){grid-column:1/3}.rank-columns{display:contents}.rank-row:first-child{min-height:80px}.compact-share{grid-column:1/3;grid-row:auto}.compact-shop{grid-column:1/3;grid-row:auto;min-height:140px}.compact-shop img{object-position:center 45%}.compact-share h3{font-size:15px}.share-section{padding:24px 14px}.share-section h2{font-size:23px}.below,.atlas,.steps{padding-left:14px;padding-right:14px}.footer{padding:20px 14px}.rank-card h3{font-size:11px}}
@media(prefers-reduced-motion:reduce){.facade-photo,.scene-transform{transition:none!important}}
/* Refinements after viewport QA */
.window-selected .hero{opacity:1!important;pointer-events:auto!important;transform:none!important}
.scene-transform{-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 5%,#000 96%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 5%,#000 96%,transparent 100%)}
@media(min-width:981px){.scene-bottom{right:auto;left:calc(50% - 390px)}.time-bar{left:52%}}
@media(max-width:980px) and (min-width:681px){.scene-bottom{right:auto;left:17px}}
@media(max-width:680px){.scene-transform{-webkit-mask-image:none;mask-image:none}}
.hero .hero-stats{position:static!important;inset:auto!important;top:auto!important;left:auto!important;right:auto!important;width:auto!important;display:block!important;margin:5px 0 0!important;line-height:1.5}
.hero .hero-stats strong{display:inline!important;font-family:Arial,sans-serif!important;font-weight:800!important}
.hero .hero-stats #stat-houses[hidden]{display:none!important}
@media(max-width:680px){.scene-toolbar{position:absolute!important;top:77px!important;bottom:auto!important;left:auto!important;right:10px!important;width:max-content!important;height:auto!important;max-width:160px!important;min-height:0!important;padding:5px!important;display:flex;align-items:center!important}.scene-actions{display:flex;gap:3px!important}.scene-btn{min-width:40px!important;padding:6px 5px!important}.hero{min-height:0}.floor-rail{top:234px}.scene-bottom{z-index:16}.time-bar{z-index:16}}

.rank-section.expanded{grid-template-rows:34px auto}
.rank-section.expanded .rank-row:not(:first-child){display:flex}