/* Тема «Коммуналка F.P.G»: дом в разрезе, комнаты = каналы TeamSpeak */
:root{
  --ink:#2b2118;--soft:#6b5a48;--paper:#f6ecd7;--paper2:#efe1c3;
  --wall:#cdbd9a;--wall2:#bfae8a;--seam:rgba(80,62,40,.18);--slab:#857864;--slab2:#6d6252;
  --red:#b23a2a;--blue:#2f5d8a;--enamel:#1f4f86;--gold:#d9a23a;
  --neon:#ff3d5e;--neon2:#ffb3c1;
  --sky1:#8db6cf;--sky2:#d9cfb6;--sky3:#efe2c4;
  --shade-off:rgba(28,26,44,.48);--glow:rgba(255,196,110,.0);
  --sans:"PT Sans",system-ui,sans-serif;--hand:"Neucha","PT Sans",cursive;--plate:"Ruslan Display","Rubik Mono One",serif;--mono:"Rubik Mono One",var(--sans);
  color-scheme:light;
}
html.night{
  --sky1:#070c22;--sky2:#18204a;--sky3:#2d3260;
  --wall:#7c7468;--wall2:#6d665b;--seam:rgba(0,0,0,.25);--slab:#4f4a42;--slab2:#3e3a34;
  --shade-off:rgba(6,8,24,.74);--glow:rgba(255,190,100,.22);
}
*{box-sizing:border-box}
html{background:var(--slab2);overflow-x:hidden}
body{margin:0;font:400 16px/1.5 var(--sans);color:var(--ink);background:linear-gradient(180deg,var(--sky1),var(--sky2) 520px,var(--sky3) 900px,var(--sky3));min-height:100vh;overflow-x:hidden}
a{color:var(--blue)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ---------- небо и крыша ---------- */
.sky{position:relative;max-width:1180px;margin:0 auto;padding:12px 16px 0;min-height:64px}
.stars{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1s;
  background-image:radial-gradient(1.4px 1.4px at 8% 20%,#fff,transparent),radial-gradient(1px 1px at 22% 60%,#fff,transparent),radial-gradient(1.6px 1.6px at 37% 14%,#fff,transparent),radial-gradient(1px 1px at 52% 40%,#fff,transparent),radial-gradient(1.3px 1.3px at 66% 22%,#fff,transparent),radial-gradient(1px 1px at 79% 55%,#fff,transparent),radial-gradient(1.5px 1.5px at 91% 18%,#fff,transparent),radial-gradient(1px 1px at 14% 80%,#fff,transparent),radial-gradient(1px 1px at 47% 75%,#fff,transparent),radial-gradient(1.2px 1.2px at 85% 82%,#fff,transparent)}
html.night .stars{opacity:.9;animation:twinkle 5s ease-in-out infinite alternate}
@keyframes twinkle{to{opacity:.55}}
.moon{position:absolute;right:6%;top:26px;width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff7d6,#f2c75c 70%);box-shadow:0 0 40px 10px rgba(255,214,120,.35);pointer-events:none}
html.night .moon{background:radial-gradient(circle at 38% 38%,#fbf6e4,#d9d2b8 70%);box-shadow:0 0 50px 12px rgba(220,225,255,.18)}
html.night .moon::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 70% 30%,transparent 46%,rgba(7,12,34,.85) 47%)}
.cloud{position:fixed;z-index:-1;height:26px;border-radius:30px;background:rgba(255,255,255,.75);filter:blur(1px);pointer-events:none;animation:drift 90s linear infinite}
.cloud::before,.cloud::after{content:"";position:absolute;background:inherit;border-radius:50%}
.cloud::before{width:46%;height:180%;left:16%;bottom:20%}.cloud::after{width:34%;height:150%;left:52%;bottom:25%}
.c1{width:150px;top:80px;left:6%}.c2{width:110px;top:40px;left:58%;animation-duration:130s;opacity:.8}
html.night .cloud{background:rgba(120,130,190,.16)}
@keyframes drift{from{transform:translateX(-30vw)}to{transform:translateX(70vw)}}

.tapes{position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:8px 10px}
.tapes a{font:400 18px/1 var(--hand);color:var(--ink);text-decoration:none;background:rgba(246,236,215,.92);padding:9px 14px 8px;box-shadow:0 1px 2px rgba(0,0,0,.2);transform:rotate(-1.2deg)}
.tapes a:nth-child(2n){transform:rotate(1.1deg)}
.tapes a.on{background:#fff3c4;box-shadow:inset 0 -3px 0 var(--red),0 1px 2px rgba(0,0,0,.2)}
.tapes a:hover{background:#fff}

.roof{position:relative;height:190px;margin-top:4px}
.antennas{position:absolute;left:0;right:0;bottom:16px;height:90px;width:100%;color:var(--slab2)}
.antennas.r{left:auto;right:0}
html.night .antennas{color:#2a2c40}
.neon-wrap{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);text-align:center;max-width:92%}
.neon{display:flex;gap:.08em;justify-content:center;font:400 clamp(30px,6.4vw,70px)/1 var(--mono);letter-spacing:.04em;white-space:nowrap}
.neon span{display:inline-block;min-width:.3em;color:rgba(150,70,80,.55);-webkit-text-stroke:2px #7d4a50;padding:0 .02em}
.neon span.sp{min-width:.35em}
html.night .neon span,.neon.on span{-webkit-text-stroke:0;color:var(--neon2);text-shadow:0 0 4px #fff,0 0 10px var(--neon),0 0 22px var(--neon),0 0 44px var(--neon)}
html.night .neon span:nth-child(3n+2){animation:flick 7s infinite}
@keyframes flick{0%,91%,93%,96%,100%{opacity:1}92%,95%{opacity:.25}}
.neon-legs{position:relative;height:18px;margin:2px 4% 0;border-top:4px solid var(--slab2);display:flex;justify-content:space-around}
.neon-legs i{width:4px;background:var(--slab2)}
.parapet{position:absolute;left:0;right:0;bottom:0;height:18px;background:var(--slab);border-top:4px solid var(--slab2);box-shadow:0 -2px 0 rgba(255,255,255,.15) inset}

/* ---------- дом ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.status{font:400 18px/1.35 var(--hand);text-align:center;background:var(--paper);margin:0 auto;padding:8px 14px;max-width:620px;transform:rotate(-.6deg);box-shadow:0 2px 4px rgba(0,0,0,.18);position:relative;z-index:2;top:-8px}
.house{position:relative;padding:14px 18px 0;background:
  repeating-linear-gradient(90deg,transparent 0 179px,var(--seam) 179px 181px),
  repeating-linear-gradient(0deg,transparent 0 89px,var(--seam) 89px 91px),
  linear-gradient(var(--wall),var(--wall2));border-left:10px solid var(--slab);border-right:10px solid var(--slab)}
.floor{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-bottom:16px;margin-bottom:14px;border-bottom:12px solid var(--slab);box-shadow:0 10px 0 -2px var(--slab2)}
.floor::before{content:attr(data-n);position:absolute;left:-46px;top:40%;font:400 20px/1 var(--plate);color:var(--paper);background:var(--enamel);border:2px solid #fff;border-radius:4px;padding:4px 6px;min-width:30px;text-align:center;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.floor.ground,.floor.under{grid-template-columns:1fr}
.floor.under{border-bottom:0;margin-bottom:0;padding-bottom:18px;box-shadow:none;background:linear-gradient(transparent,rgba(0,0,0,.18))}
.floor.under::before{background:var(--slab2)}
.band{display:flex;justify-content:center;margin:-4px 0 14px}
.band span{font:400 clamp(14px,1.6vw,19px)/1 var(--plate);color:#fff;background:var(--red);padding:9px 22px 8px;border:3px double #f6d9a8;letter-spacing:.06em;box-shadow:0 2px 0 rgba(0,0,0,.25)}

.apt{position:relative;margin:0}
.room{position:relative;aspect-ratio:2/1;overflow:hidden;background:#3a2e24;box-shadow:inset 0 0 0 3px rgba(40,28,18,.55),0 2px 0 rgba(0,0,0,.2)}
.wide .room{aspect-ratio:4/1}
.under .room{aspect-ratio:3/1}
.bgimg{position:absolute;inset:0;background-size:cover;background-position:center bottom;transition:filter .8s}
.flip .bgimg{transform:scaleX(-1)}
.shade{position:absolute;inset:0;pointer-events:none;transition:background .8s,box-shadow .8s;background:transparent}
.apt.off .shade{background:var(--shade-off)}
.apt.off .bgimg{filter:saturate(.55) brightness(.85)}
.bg-balcony .room{background:linear-gradient(#a9cde0,#e6dcc2 85%)}
html.night .bg-balcony .room{background:radial-gradient(1.2px 1.2px at 20% 20%,#fff,transparent),radial-gradient(1px 1px at 60% 35%,#fff,transparent),radial-gradient(1.3px 1.3px at 82% 15%,#fff,transparent),linear-gradient(#0b1230,#2a2f55)}
html.night .apt.off .bgimg{filter:saturate(.45) brightness(.7)}
html.night .apt.lit .shade{box-shadow:inset 0 0 120px 30px var(--glow)}
.apt.off .people{opacity:0}

.plaque{position:absolute;left:10px;top:10px;z-index:4;display:flex;align-items:center;gap:6px;max-width:calc(100% - 20px);border:2px solid #e8eef6;border-radius:5px;background:var(--enamel);color:#fff;font:700 14px/1.15 var(--sans);padding:5px 9px;box-shadow:0 2px 3px rgba(0,0,0,.35)}
.plaque:hover{background:#2a64a6}
.pl-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-c{font:400 12px/1 var(--mono);background:var(--red);border-radius:10px;padding:3px 6px 2px}
.pl-c:empty{display:none}
.apt.off .plaque{background:#555b66;border-color:#c9ccd2}

/* горячие точки: вещи в комнатах */
.hots{position:absolute;inset:0;z-index:2}
.hot{position:absolute;border:0;background:transparent;padding:0;border-radius:6px}
.hot::after{content:"";position:absolute;right:max(2px,8%);top:max(2px,8%);width:12px;height:12px;border-radius:50%;background:#fff6d6;border:3px solid var(--red);box-shadow:0 0 0 0 rgba(178,58,42,.6),0 1px 2px rgba(0,0,0,.4);animation:ping 2.4s ease-out infinite;box-sizing:border-box}
.hot:hover,.hot:focus-visible{background:rgba(255,240,190,.18);box-shadow:0 0 0 2px rgba(255,240,190,.85)}
.hot .tip{display:none}
.kom-tip{position:fixed;z-index:30;pointer-events:none;white-space:nowrap;font:400 16px/1 var(--hand);background:var(--paper);color:var(--ink);padding:6px 9px 5px;border-radius:3px;box-shadow:0 2px 6px rgba(0,0,0,.35);opacity:0;transition:opacity .15s}
.kom-tip.on{opacity:1}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,246,214,.9),0 1px 2px rgba(0,0,0,.4)}70%,100%{box-shadow:0 0 0 10px rgba(255,246,214,0),0 1px 2px rgba(0,0,0,.4)}}
.apt.off .hot::after{opacity:.4}
/* имена лидеров недели в рамках доски почёта */
.honor-frames{position:absolute;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr;pointer-events:none;z-index:1}
.honor-frames span{display:flex;align-items:center;justify-content:center;text-align:center;font:700 11px/1.02 var(--sans);letter-spacing:-.02em;color:#3d1f12;padding:2px 3px;overflow:hidden}
.honor-title{position:absolute;display:flex;align-items:center;justify-content:center;font:400 clamp(6px,.62vw,10px)/1 var(--plate);color:var(--red);letter-spacing:.05em;pointer-events:none;z-index:1}

/* жильцы */
.people{position:absolute;inset:0;z-index:3;transition:opacity .6s;pointer-events:none}
.res{position:absolute;bottom:var(--floor,6%);height:var(--h,44%);width:0;border:0;background:none;padding:0;pointer-events:auto;transition:left 1.2s ease-in-out}
.fig{position:absolute;bottom:0;left:0;height:100%;transform:translateX(-50%)}
.fig img{position:absolute;bottom:0;left:50%;height:100%;width:auto;transform:translateX(-50%);filter:drop-shadow(0 3px 2px rgba(0,0,0,.35));pointer-events:none;user-select:none}
.fig img.sit{height:84%}
.fig img.lump{height:38%}
.res.walking .fig{animation:pace var(--dur,14s) linear infinite;animation-delay:var(--delay,0s)}
.res.walking .fig img.w1{animation:frameA .56s steps(1) infinite}
.res.walking .fig img.w2{animation:frameB .56s steps(1) infinite}
@keyframes frameA{0%{opacity:1}50%{opacity:0}}
@keyframes frameB{0%{opacity:0}50%{opacity:1}}
@keyframes pace{
  0%{transform:translateX(-50%) translateX(0) scaleX(1)}
  44%{transform:translateX(-50%) translateX(var(--dx,120px)) scaleX(1)}
  50%{transform:translateX(-50%) translateX(var(--dx,120px)) scaleX(-1)}
  94%{transform:translateX(-50%) translateX(0) scaleX(-1)}
  100%{transform:translateX(-50%) translateX(0) scaleX(1)}}
.res.facing-left .fig{transform:translateX(-50%) scaleX(-1)}
.res .nm{position:absolute;left:50%;bottom:calc(100% + 2px);transform:translateX(-50%);white-space:nowrap;font:400 13px/1 var(--hand);background:rgba(246,236,215,.94);color:var(--ink);padding:3px 6px 2px;border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.3);max-width:140px;overflow:hidden;text-overflow:ellipsis}
.res.walking .nm{animation:pacenm var(--dur,14s) linear infinite;animation-delay:var(--delay,0s)}
@keyframes pacenm{0%,100%{transform:translateX(-50%)}44%,50%{transform:translateX(-50%) translateX(var(--dx,120px))}}
.res.is-me .nm{background:#ffe27a;box-shadow:0 0 0 2px var(--red)}
.res .bub{white-space:nowrap;position:absolute;left:50%;bottom:calc(100% + 22px);transform:translateX(-10%);background:#fff;border-radius:12px;padding:3px 8px;font:700 13px/1 var(--sans);box-shadow:0 1px 3px rgba(0,0,0,.3);display:none}
.res .bub::after{content:"";position:absolute;left:10px;bottom:-5px;border:5px solid transparent;border-top-color:#fff;border-bottom:0}
.res.talking .bub{display:block;animation:talk 1.4s ease-in-out infinite}
.res.talking .bub i{display:inline-block;animation:dot 1s infinite}.res.talking .bub i:nth-child(2){animation-delay:.15s}.res.talking .bub i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:none}30%{transform:translateY(-3px)}}
@keyframes talk{0%,100%{transform:translateX(-10%) scale(1)}50%{transform:translateX(-10%) scale(1.06)}}
.res.afk .nm,.res.idle .nm{opacity:.75}
.res.afk .zz{position:absolute;left:30%;bottom:80%;font:400 16px/1 var(--hand);color:#fff;text-shadow:0 1px 2px #000;animation:zz 3s ease-in-out infinite}
@keyframes zz{0%{opacity:0;transform:translateY(6px)}40%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
.res.entering{animation:enter .9s ease-out}
@keyframes enter{from{opacity:0;transform:translateY(8px)}}
.more{position:absolute;right:10px;bottom:10px;z-index:4;font:400 14px/1 var(--hand);background:var(--paper);padding:4px 8px;border:0;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.more:empty{display:none}

/* ---------- двор: доска объявлений ---------- */
.yard{margin:0 -16px;padding:34px 16px 30px;background:#524d46;box-shadow:0 0 0 100vmax #524d46;clip-path:inset(0 -100vmax)}
.yard-h{margin:0 auto 18px;max-width:max-content;font:400 clamp(16px,2vw,22px)/1 var(--plate);color:#fff;background:var(--red);padding:10px 18px 9px;letter-spacing:.04em}
.notes{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px;padding:22px;background:#b88b5c;background-image:radial-gradient(rgba(0,0,0,.12) 1px,transparent 1.5px),radial-gradient(rgba(255,255,255,.1) 1px,transparent 1.5px);background-size:9px 9px,13px 13px;border:12px solid #6e4a2b;box-shadow:inset 0 0 18px rgba(0,0,0,.35)}
.note{position:relative;background:var(--paper);padding:20px 18px 16px;box-shadow:0 3px 6px rgba(0,0,0,.3);transform:rotate(-.8deg)}
.note:nth-child(2n){transform:rotate(.9deg)}.note:nth-child(3n){transform:rotate(-.3deg)}
.note::before{content:"";position:absolute;left:50%;top:-10px;width:80px;height:22px;transform:translateX(-50%) rotate(-2deg);background:rgba(255,248,210,.7);box-shadow:0 1px 1px rgba(0,0,0,.1)}
.note h3{margin:0 0 8px;font:400 22px/1.1 var(--hand)}
.note p{margin:0 0 8px}
.n-red{background:#fbe3d8}.n-red h3{color:var(--red)}
.n-blue{background:#e2ecf4}.n-yellow{background:#fbf0b8}.n-green{background:#e3efd5}
.n-grid{background-color:#fbfaf3;background-image:linear-gradient(rgba(47,93,138,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(47,93,138,.14) 1px,transparent 1px);background-size:16px 16px}
.n-honor{background:#f7e2a8;border:3px double var(--red)}
.small{font-size:14px;color:var(--soft)}
.btn{display:inline-block;background:var(--red);color:#fff;border:0;text-decoration:none;font:700 15px/1 var(--sans);padding:12px 16px;border-radius:3px;box-shadow:0 2px 0 #7d2418;margin:4px 0}
.btn:hover{background:#c94a37}
.linkbtn{border:0;background:none;color:var(--blue);text-decoration:underline;padding:6px 0;font:inherit;font-size:14px}
.big-cd{font:400 30px/1 var(--mono);margin:4px 0 2px;color:var(--red)}
.evs{margin:8px 0 0;padding-left:18px}.evs li{margin-bottom:4px}
.honor{margin:0;padding-left:22px}.honor li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed rgba(0,0,0,.2);padding:4px 0}
.honor li.is-me{background:#ffe27a}
.letter{font:400 18px/1.25 var(--hand)}
.madlib input,.madlib select{font:400 18px/1 var(--hand);border:0;border-bottom:2px solid var(--blue);background:transparent;width:7.5em;padding:2px;color:var(--ink)}
.madlib select{width:auto}

/* ---------- всплывашка и домофон ---------- */
.pop{position:fixed;z-index:20;width:min(330px,calc(100vw - 24px));max-height:min(70vh,520px);overflow:auto;background:var(--paper);color:var(--ink);padding:18px 18px 14px;border-radius:4px;box-shadow:0 10px 30px rgba(0,0,0,.4),0 0 0 1px rgba(0,0,0,.08)}
.pop h3{margin:0 26px 6px 0;font:400 23px/1.1 var(--hand)}
.pop p{margin:0 0 8px}.pop ol,.pop ul{margin:4px 0 10px;padding-left:22px}.pop li{margin-bottom:3px}
.pop .row{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed rgba(0,0,0,.18);padding:3px 0}
.pop-x{position:absolute;right:6px;top:6px;width:36px;height:36px;border:0;background:transparent;font-size:24px;line-height:1;color:var(--soft)}
.pop .mini{display:flex;align-items:flex-end;gap:10px}.pop .mini img{height:90px}
.intercom{position:fixed;left:12px;bottom:12px;z-index:15;display:flex;flex-direction:column;gap:6px;max-width:min(360px,calc(100vw - 24px));pointer-events:none}
.intercom div{background:#3b3e44;color:#e9f2e2;font:400 14px/1.3 var(--sans);padding:9px 12px 9px 30px;border-radius:6px;position:relative;box-shadow:0 4px 12px rgba(0,0,0,.35);animation:icIn .4s ease-out}
.intercom div::before{content:"";position:absolute;left:11px;top:13px;width:8px;height:8px;border-radius:50%;background:#7cff6b;box-shadow:0 0 6px #7cff6b}
.intercom div.out{opacity:0;transition:opacity .6s}
@keyframes icIn{from{opacity:0;transform:translateY(10px)}}

/* ---------- подстраницы: «домовая книга» ---------- */
.sheet{background:var(--paper);padding:26px 28px;margin:0 0 26px;box-shadow:0 4px 14px rgba(0,0,0,.25);position:relative;background-image:linear-gradient(90deg,transparent 46px,rgba(178,58,42,.35) 46px 48px,transparent 48px),repeating-linear-gradient(transparent 0 29px,rgba(47,93,138,.16) 29px 30px)}
.sheet h1{margin:0 0 4px;font:400 clamp(26px,4vw,40px)/1.1 var(--plate);color:var(--red);padding-left:34px}
.sheet .kick{font:400 18px/1 var(--hand);color:var(--soft);padding-left:34px;margin-bottom:14px}
.sheet .in{padding-left:34px}
.tabs,.periods{display:flex;flex-wrap:wrap;gap:6px 8px;margin:10px 0}
.tabs a,.periods a{font:400 17px/1 var(--hand);color:var(--ink);text-decoration:none;background:#fff;padding:9px 12px 8px;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.tabs a.on,.periods a.on{background:var(--red);color:#fff}
.periods a{background:var(--paper2)}
.book{width:100%;border-collapse:collapse;font-size:16px}
.book th{text-align:left;font:400 15px/1 var(--hand);color:var(--soft);padding:8px 6px;border-bottom:2px solid var(--ink)}
.book td{padding:7px 6px;border-bottom:1px solid rgba(43,33,24,.15)}
.book td.n{font:400 14px/1 var(--mono);width:44px;color:var(--soft)}
.book tr.first td.n{color:var(--red)}
.book td.v{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.book td.d{text-align:right;width:56px;font-size:13px;white-space:nowrap}
.book .up{color:#2f7a2f}.book .down{color:var(--red)}.book .new{color:var(--blue)}
.book tr.is-me td{background:#ffe27a}
.findme{margin:12px 0;font:400 17px/1 var(--hand)}.findme input{font:400 17px/1 var(--hand);border:0;border-bottom:2px solid var(--blue);background:transparent;padding:3px}
.cols{display:grid;grid-template-columns:3fr 2fr;gap:26px}
.weeks{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.weeks section{background:#fff;padding:14px 16px;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.weeks h2{margin:0 0 6px;font:400 20px/1.1 var(--hand);color:var(--red)}
.cmd{background:#fff;padding:9px 12px;margin:0 0 8px;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.howto ol{padding-left:22px}.howto li{margin-bottom:6px}

/* ---------- подвал ---------- */
.foot{max-width:1180px;margin:0 auto;padding:18px 16px 10px;box-shadow:0 0 0 100vmax var(--slab2);clip-path:inset(0 -100vmax);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;font-size:14px;color:#e8dcc4;background:var(--slab2)}
.foot a{color:#ffd98a}
.tbar{max-width:1180px;margin:0 auto;box-shadow:0 0 0 100vmax var(--slab2);clip-path:inset(0 -100vmax);padding-bottom:60px!important;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:0 16px 18px;font:700 13px var(--sans);color:#e8dcc4;background:var(--slab2)}
.tbar a{color:#e8dcc4;display:inline-block;padding:10px 2px}.tbar a.on{color:#fff;text-decoration:underline;text-decoration-color:var(--neon);text-decoration-thickness:3px}
.tbar-vote{min-height:36px;font-size:13px;border:0;background:var(--red);color:#fff;padding:6px 10px;border-radius:3px}.tbar-res{opacity:.8}
.egg{position:fixed;right:12px;bottom:10px;border:0;background:transparent;color:#fff;font:400 14px monospace;padding:4px;opacity:0;pointer-events:none;transition:opacity .6s;z-index:9}
.egg.egg-on{opacity:.55;pointer-events:auto;animation:blink 1s steps(1) infinite}@keyframes blink{50%{opacity:0}}
html.crt-off body{animation:crt .25s ease-in forwards}@keyframes crt{to{transform:scaleY(.005);filter:brightness(3)}}

/* ---------- телефон ---------- */
@media (max-width:760px){
  body{font-size:15px}
  .roof{height:130px}
  .moon{width:42px;height:42px;top:70px}
  .house{padding:10px 8px 0;border-width:6px}
  .floor{grid-template-columns:1fr;gap:12px}
  .floor::before{display:none}
  .room{aspect-ratio:16/9}
  .wide .room{aspect-ratio:2.4/1}
  .under .room{aspect-ratio:2/1}
  .plaque{font-size:13px;left:6px;top:6px}
  .res .nm{font-size:12px;max-width:100px}
  .notes{padding:14px;border-width:8px;gap:18px}
  .sheet{padding:18px 14px;background-image:none}
  .sheet h1,.sheet .kick,.sheet .in{padding-left:0}
  .cols{grid-template-columns:1fr}
  .intercom{left:8px;right:8px;bottom:8px}
  .pop{left:12px!important;right:12px;top:auto!important;bottom:12px;width:auto}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .res.walking .fig img.w2{opacity:0}
}

/* ---------- стенгазета ---------- */
.stengaz{position:relative;background:#fbf8ef;margin:0 0 26px;padding:30px 34px 26px;box-shadow:0 6px 18px rgba(0,0,0,.3);background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px);background-size:6px 6px}
.stengaz::before,.stengaz::after{content:"";position:absolute;top:-12px;width:110px;height:28px;background:rgba(255,248,210,.75);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.stengaz::before{left:30px;transform:rotate(-4deg)}.stengaz::after{right:30px;transform:rotate(3deg)}
.sg-head{text-align:center;margin-bottom:22px;border-bottom:4px dashed rgba(178,58,42,.5);padding-bottom:14px}
.sg-title{font:400 clamp(30px,6vw,64px)/1.1 var(--plate);letter-spacing:.03em;text-align:center}
.sg-title .w{display:inline-block;white-space:nowrap;margin:0 .12em}
.sg-title .w span{display:inline-block;transform:rotate(-3deg)}.sg-title .w span:nth-child(2n){transform:rotate(3deg) translateY(2px)}
.sg-title .k0{color:#b23a2a}.sg-title .k1{color:#2f5d8a}.sg-title .k2{color:#3d7a3a}.sg-title .k3{color:#c98a1a}.sg-title .k4{color:#7a3a8a}
.sg-sub{font:400 18px/1.2 var(--hand);color:var(--soft);margin-top:8px}
.sg-lead{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:26px;align-items:start;margin-bottom:24px}
.sg-photo{margin:6px 0 0;background:#fff;padding:10px 10px 30px;box-shadow:0 3px 8px rgba(0,0,0,.25);transform:rotate(-2deg);position:relative}
.sg-photo::before{content:"";position:absolute;left:50%;top:-12px;width:90px;height:24px;transform:translateX(-50%) rotate(2deg);background:rgba(255,248,210,.8)}
.sg-photo img{display:block;width:100%;height:auto;filter:sepia(.35) contrast(1.05)}
.sg-kick{font:400 17px/1 var(--hand);color:#fff;background:var(--red);display:inline-block;padding:5px 10px 4px;transform:rotate(-1.5deg)}
.sg-lead h2{font:400 clamp(26px,3.4vw,38px)/1.1 var(--hand);color:#b23a2a;margin:12px 0 8px}
.sg-deck{font:700 17px/1.4 var(--sans)}
.sg-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;margin-bottom:20px}
.sg-note{padding:14px 16px;border:3px solid;border-radius:14px 4px 16px 6px}
.sg-note h3{font:400 22px/1.15 var(--hand);margin:0 0 6px}.sg-note p{margin:0}
.sg-note.n0{border-color:#2f5d8a}.sg-note.n0 h3{color:#2f5d8a}
.sg-note.n1{border-color:#3d7a3a}.sg-note.n1 h3{color:#3d7a3a}
.sg-note.n2{border-color:#c98a1a}.sg-note.n2 h3{color:#a86e0a}
.sg-short{margin:0 0 18px}.sg-short h3{font:400 22px/1 var(--hand);color:#7a3a8a;margin:0 0 6px;text-decoration:underline wavy rgba(122,58,138,.5)}
.sg-short ul{margin:0;padding-left:20px;columns:2 280px;column-gap:28px}.sg-short li{margin-bottom:5px;break-inside:avoid}
.sg-mail p{font:400 19px/1.3 var(--hand);margin:0 0 6px}
.sg-nav{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;border-top:4px dashed rgba(178,58,42,.5);padding-top:14px;font:400 18px/1 var(--hand)}
.sg-nav a{padding:8px 2px}
.sg-arch{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.sg-card{display:block;background:#fff;padding:12px 14px;text-decoration:none;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.18);border-left:5px solid var(--red)}
.sg-card b{display:block;font:400 19px/1.2 var(--hand);margin-top:4px}
.sg-card:hover{background:#fff8e0}
@media (max-width:760px){.stengaz{padding:22px 16px 18px}.sg-lead{grid-template-columns:1fr}.sg-photo{max-width:360px}}

/* ---------- фасад: первый экран ---------- */
.facade-wrap{position:relative;margin:-6px auto 18px;text-align:center}
.fac{position:relative;display:inline-block;width:max(260px,min(100%,calc((100vh - 270px) * .8),calc((100svh - 270px) * .8),720px));container-type:inline-size;vertical-align:top}
.fac-img{display:block;width:100%;height:auto;transition:filter .8s}
html.night .fac-img,html.night .fac-rail{filter:brightness(.42) saturate(.7) hue-rotate(-12deg)}
.fac-neon{position:absolute;left:0;right:0;top:4.5%;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.fac-neon .neon{font-size:min(9cqw,70px)}
.fac-neon .neon-legs{width:70%}
.fac-layer{position:absolute;inset:0}
.win{position:absolute;border:0;padding:0;background:transparent;cursor:pointer;border-radius:2px}
.win.lit{background:radial-gradient(ellipse at 50% 35%,rgba(255,226,150,.85),rgba(255,176,80,.6) 60%,rgba(214,120,40,.45));mix-blend-mode:screen;box-shadow:0 0 10px 2px rgba(255,190,90,.25)}
html.day .win.lit{opacity:.92;mix-blend-mode:normal;background:radial-gradient(ellipse at 50% 35%,rgba(255,228,160,.78),rgba(255,184,90,.62) 65%,rgba(220,130,50,.55))}
html.night .win.lit{box-shadow:0 0 18px 6px rgba(255,190,90,.35)}
.win.stair{cursor:default;pointer-events:none}
html.night .win.stair{background:rgba(160,190,255,.12)}
.win:hover,.win:focus-visible{outline:2px solid #fff6d6;outline-offset:1px}
.win.flick{animation:winflick 1.4s steps(1)}
@keyframes winflick{0%,20%,45%{opacity:.15}10%,30%,60%,100%{opacity:1}}
.smoker{position:absolute;pointer-events:none;height:auto}
.smoker img{display:block;width:100%;height:auto;filter:drop-shadow(0 2px 2px rgba(0,0,0,.4))}
html.night .smoker img{filter:brightness(.55) drop-shadow(0 2px 2px rgba(0,0,0,.4))}
.smoke{position:absolute;left:62%;top:-4%;width:30%;aspect-ratio:1;pointer-events:none}
.smoke i{position:absolute;left:0;bottom:0;width:40%;aspect-ratio:1;border-radius:50%;background:rgba(240,240,240,.55);filter:blur(2px);animation:puff 3.6s ease-out infinite;opacity:0}
.smoke i:nth-child(2){animation-delay:1.2s}.smoke i:nth-child(3){animation-delay:2.4s}
@keyframes puff{0%{opacity:0;transform:translate(0,0) scale(.4)}20%{opacity:.8}100%{opacity:0;transform:translate(60%,-220%) scale(1.6)}}
.fac-rail{position:absolute;pointer-events:none;background-repeat:no-repeat;transition:filter .8s}
.fac-cat{position:absolute;border:0;padding:0;background:none;cursor:pointer;transform:translateX(-50%)}
.fac-cat img{display:block;height:100%;width:auto}
html.night .fac-cat img{filter:brightness(.6)}
.egg-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.egg-art .chalk{opacity:.33}
html.night .egg-art .chalk{opacity:.18}
html.night .egg-art{filter:brightness(.55)}
.egg-art [data-egg-sway]{pointer-events:auto;cursor:pointer;transform-box:fill-box;transform-origin:50% 100%}
.egg-art .swaying{animation:sway 1.6s ease-in-out}
@keyframes sway{25%{rotate:6deg}60%{rotate:-4deg}}
.fac-door{position:absolute;left:50%;top:76.5%;transform:translateX(-50%);white-space:nowrap;background:var(--enamel);color:#fff;border:2px solid #e8eef6;border-radius:5px;padding:5px 10px;font:700 clamp(11px,2.1cqw,15px)/1.1 var(--sans);text-decoration:none;box-shadow:0 2px 4px rgba(0,0,0,.4);z-index:3}
.fac-door:hover{background:#2a64a6}
.fac-door b{font:400 1.05em/1 var(--mono);background:var(--red);border-radius:9px;padding:2px 6px 1px;margin-right:2px}
.peek-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 14px;margin-top:12px}
.peek-row .small{font:400 16px/1.2 var(--hand);color:var(--ink);background:rgba(246,236,215,.85);padding:4px 8px}
.facade-wrap.leaving .fac{animation:wallup .75s cubic-bezier(.6,0,.3,1) forwards}
@keyframes wallup{to{transform:translateY(-12%);opacity:0;filter:blur(2px)}}
html.inside .facade-wrap{display:none}
.outside{display:none;margin:0 auto 10px;font:400 16px/1 var(--hand)}
html.inside .outside{display:block}
.apt.flash .room{animation:aptflash 1.6s ease-out}
@keyframes aptflash{0%,40%{box-shadow:inset 0 0 0 4px #ffe27a,0 0 0 6px rgba(255,226,122,.6)}}
@media (max-width:760px){.fac{width:100%}.peek-row .small{font-size:14px}}
@media (prefers-reduced-motion:reduce){.facade-wrap.leaving .fac{animation:none;opacity:0}}

/* разрез открывается по кнопке «Заглянуть внутрь» (или по клику на окно), до этого под фасадом сразу доска объявлений */
html:not(.inside) .facade-wrap ~ .house{display:none}
.facade-wrap{margin-bottom:26px}

/* свободная квартира (нечётное число комнат на этаже) */
.apt.repair .room{background:#8a7f6e}
.repair-wall{position:absolute;inset:0;background:
  repeating-linear-gradient(0deg,transparent 0 22px,rgba(60,40,30,.25) 22px 24px),
  repeating-linear-gradient(90deg,transparent 0 46px,rgba(60,40,30,.22) 46px 48px),
  linear-gradient(#b5684a,#9c5a40 70%,#7a6a58 86%,#6e6252)}
html.night .repair-wall{filter:brightness(.55)}
.repair-note{position:absolute;left:50%;top:22%;transform:translateX(-50%) rotate(-2deg);background:#f6ecd7;padding:10px 14px 8px;text-align:center;box-shadow:0 3px 6px rgba(0,0,0,.35);font:400 15px/1.25 var(--hand);max-width:70%}
.repair-note b{display:block;font:400 20px/1 var(--plate);color:var(--red);margin-bottom:4px;letter-spacing:.06em}
.repair-props i{position:absolute;bottom:6%}
.repair-props .ladder{left:12%;width:9%;height:52%;background:repeating-linear-gradient(0deg,transparent 0 16%,#c9a46a 16% 21%),linear-gradient(90deg,#c9a46a 0 14%,transparent 14% 86%,#c9a46a 86%);transform:skewX(-6deg)}
.repair-props .bucket{right:16%;width:7%;height:14%;background:#7a8c96;border-radius:0 0 6px 6px;box-shadow:inset 0 4px 0 #e8e2d4}
.repair-props .plank{left:30%;right:30%;height:4%;background:#a77c4c;transform:rotate(-4deg)}

/* дверной звонок у подъезда */
.fac-bell{position:absolute;left:56.6%;top:86.2%;width:3.2%;aspect-ratio:1;border-radius:50%;border:2px solid #4a3a2a;background:radial-gradient(circle at 40% 35%,#fff7d0,#d9b45a 60%,#8a6a2a);box-shadow:0 2px 3px rgba(0,0,0,.45);padding:0;cursor:pointer;z-index:4}
.fac-bell:hover{filter:brightness(1.15)}
.fac-bell.ring{animation:bellshake .5s ease-in-out 2}
@keyframes bellshake{20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(5deg)}}
.bell-say{position:absolute;left:62%;top:73%;z-index:5;background:#fff;color:var(--ink);font:400 clamp(14px,2.6cqw,19px)/1.2 var(--hand);padding:8px 12px;border-radius:12px;box-shadow:0 3px 8px rgba(0,0,0,.35);max-width:44%;text-align:left}
.bell-say::after{content:"";position:absolute;left:14px;bottom:-8px;border:8px solid transparent;border-top-color:#fff;border-bottom:0}
.bell-say a{font-weight:700}