:root { color-scheme: light; font-family: Manrope, system-ui, sans-serif; color: #171717; background: #f4f1eb; --red:#e72d32; --gray:#777b82; --ink:#171717; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; overflow:hidden; background:#e9e5dc; }
.intro-loader{position:fixed;z-index:100;inset:0;overflow:hidden;pointer-events:auto;background:transparent}.intro-panel{position:absolute;top:0;bottom:0;height:100%;background:#e72d32;will-change:transform;transition:transform .9s cubic-bezier(.76,0,.24,1)}.intro-panel-left{left:0;width:100%;clip-path:polygon(0 0,51% 73%,51% 100%,0 100%)}.intro-panel-center{left:0;width:100%;clip-path:polygon(0 0,100% 0,50% 74%)}.intro-panel-right{right:0;width:100%;clip-path:polygon(100% 0,100% 100%,49% 100%,49% 73%)}.intro-mask{position:absolute;z-index:2;left:50%;top:50%;display:flex;flex-direction:column;align-items:center;gap:10px;transform:translate(-50%,-50%);transition:transform .7s cubic-bezier(.7,-.4,.3,1.4),opacity .45s ease;filter:drop-shadow(0 9px 0 rgba(13,24,52,.28))}.intro-mask img{width:88px;height:101px;animation:intro-pulse .85s ease-in-out infinite alternate}.intro-mask span{padding:7px 11px;border:3px solid #171717;border-radius:10px;background:#fff;color:#171717;font-size:12px;font-weight:800;letter-spacing:.08em;box-shadow:4px 4px 0 #171717}.intro-loader.is-leaving{pointer-events:none}.intro-loader.is-leaving .intro-panel-left{transform:translate(-105%,18%)}.intro-loader.is-leaving .intro-panel-center{transform:translateY(-105%)}.intro-loader.is-leaving .intro-panel-right{transform:translate(105%,18%)}.intro-loader.is-leaving .intro-mask{transform:translate(-50%,-62%) scale(1.22) rotate(-5deg);opacity:0}@keyframes intro-pulse{0%{transform:translateY(0) rotate(-4deg) scale(1)}50%{transform:translateY(-9px) rotate(4deg) scale(1.05)}100%{transform:translateY(0) rotate(-4deg) scale(1)}}
button, input { font: inherit; }
.intro-mask small{padding:5px 8px;border-radius:8px;background:rgba(23,23,23,.86);color:#fff;font-size:10px;font-weight:800;letter-spacing:.02em}
button { cursor: pointer; }
.app-shell { width:100%; height:100dvh; margin:0; padding:0; }
.topbar { position:absolute;z-index:7;left:12px;right:12px;top:max(10px,env(safe-area-inset-top));height:48px;display:flex;align-items:center;gap:12px;pointer-events:none; }
.topbar>*{pointer-events:auto}
.brand { display:flex; gap:8px; align-items:center; color:var(--ink); text-decoration:none; font-weight:800; letter-spacing:.04em; font-size:13px;background:rgba(255,255,255,.94);padding:7px 10px 7px 7px;border-radius:12px;box-shadow:0 3px 14px rgba(0,0,0,.12); }
.brand-accent{color:var(--red)}
.brand-mark { display:grid; place-items:center; width:30px; height:30px; overflow:hidden; background:var(--red); border:3px solid var(--ink); box-shadow:3px 3px 0 var(--ink); transform:rotate(-3deg); }
.brand-mark img{width:25px;height:25px;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.32))}
.city-button { margin-left:auto;border:0; border-radius:12px; background:rgba(255,255,255,.94); padding:10px 14px; font-size:12px; font-weight:800;box-shadow:0 3px 14px rgba(0,0,0,.12); }
.legend-dot { width:10px; height:10px; border-radius:2px; box-shadow:1px 1px 0 #181818; }.legend-dot.good{background:var(--red)}.legend-dot.bad{background:var(--gray)}.legend-dot.split{background:linear-gradient(90deg,var(--red) 50%,var(--gray) 50%)}
.map-card { position:relative; width:100%; height:100%; overflow:hidden; background:#ddd8ce; }
.map { width:100%; height:100%; }
.demo-map { position:relative; width:100%; height:100%; overflow:hidden; background-color:#e9e5dc; background-image:linear-gradient(28deg, transparent 47%, #d0cbc0 48%, #d0cbc0 50%, transparent 51%),linear-gradient(152deg, transparent 43%, #d8d3c9 44%, #d8d3c9 46%, transparent 47%); }
.river { position:absolute; width:130%; height:78px; background:#b9d8df; transform:rotate(-19deg); left:-16%; top:45%; border:2px solid #9dc4cd; }
.road { position:absolute; background:#fff; border:1px solid #d2cdc3; height:13px; width:100%; }.road-a{transform:rotate(12deg);top:26%;left:-4%}.road-b{transform:rotate(-42deg);top:55%;left:18%}.road-c{transform:rotate(63deg);top:18%;left:-28%}
.district { position:absolute; color:#aaa59d; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; }.d1{left:12%;bottom:18%}.d2{left:43%;top:12%}.d3{right:7%;top:37%}
.marker { position:absolute; border:0; background:transparent; padding:0; transform:translate(-50%,-50%); filter:drop-shadow(0 4px 2px rgba(0,0,0,.22)); transition:.2s transform; z-index:2; }.marker:hover,.marker:focus{transform:translate(-50%,-50%) scale(1.12)}
.mask-icon { width:45px; height:51px; overflow:visible; image-rendering:pixelated; }.mask-fill{fill:var(--marker-color);stroke:#171717;stroke-width:4;stroke-linejoin:bevel}.mask-lines{fill:none;stroke:#171717;stroke-width:1.3;opacity:.72}.mask-eye{fill:#fff;stroke:#171717;stroke-width:5;stroke-linejoin:bevel}
.search{position:absolute;z-index:6;top:70px;left:12px;right:12px;height:48px;display:flex;align-items:center;background:#fff;border-radius:14px;box-shadow:0 5px 20px rgba(0,0,0,.17)}.search-icon{padding-left:14px;font-size:22px}.search input{min-width:0;flex:1;height:100%;border:0;outline:0;padding:0 10px;background:transparent;font-size:14px}.search>button{height:34px;margin-right:7px;padding:0 13px;border:0;border-radius:9px;color:#fff;background:var(--ink);font-size:11px;font-weight:800}.search-message{position:absolute;z-index:4;top:122px;left:18px;margin:0;padding:7px 10px;border-radius:8px;background:#171717;color:#fff;font-size:10px;font-weight:700}.search-suggestions{position:absolute;top:54px;left:0;right:0;max-height:min(52vh,360px);overflow:auto;padding:6px;background:#fff;border-radius:13px;box-shadow:0 8px 28px rgba(0,0,0,.22)}.search-suggestions button{display:block;width:100%;margin:0;padding:11px 10px;border:0;border-radius:9px;background:transparent;text-align:left}.search-suggestions button:hover,.search-suggestions button:focus{background:#f0ede7}.search-suggestions strong{display:block;font-size:12px}.search-suggestions span{display:block;margin-top:3px;color:#817d76;font-size:10px}
.suggestion-state { margin:4px 10px 7px; color:#817d76; font-size:10px; }
.search-message button{margin-left:9px;padding:4px 7px;border:0;border-radius:6px;background:#fff;color:#171717;font-size:9px;font-weight:800}.search-message button:disabled{opacity:.65}
.candidate-marker{position:relative;width:164px;height:82px;display:flex;align-items:flex-end;justify-content:center;cursor:pointer;filter:drop-shadow(0 4px 3px rgba(0,0,0,.3));animation:candidate-bounce 1s ease-in-out infinite}.candidate-marker img{width:43px;height:49px;display:block}.candidate-marker span{position:absolute;z-index:2;top:0;left:50%;transform:translateX(-50%);white-space:nowrap;padding:5px 8px;border:2px solid #171717;border-radius:9px;background:#e72d32;color:#fff;font:800 11px Manrope,sans-serif;box-shadow:2px 2px 0 #171717}.candidate-marker span::after{content:"";position:absolute;left:50%;bottom:-7px;width:9px;height:9px;background:#e72d32;border-right:2px solid #171717;border-bottom:2px solid #171717;transform:translateX(-50%) rotate(45deg)}@keyframes candidate-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.map-legend{display:flex;align-items:center;gap:12px;padding:6px 10px;background:rgba(255,255,255,.94);border-radius:12px;box-shadow:0 3px 14px rgba(0,0,0,.12);font-size:11px;font-weight:800}.map-legend span{display:flex;align-items:center;gap:6px}.map-legend span img{width:25px;height:29px;object-fit:contain;filter:drop-shadow(1px 2px 0 rgba(0,0,0,.22))}.map-legend b{font:inherit}.map-legend button{height:27px;padding:0 8px;border:0;border-left:1px solid #d2cdc4;background:transparent;color:#5e5a54;font:800 10px Manrope,sans-serif}
.empty-marker{display:block;width:18px;height:18px;border:3px solid #171717;border-radius:50%;background:#9b9da2;box-shadow:0 3px 3px rgba(0,0,0,.25)}
.demo-badge { position:absolute; right:12px; top:10px; margin:0; padding:5px 8px; color:#55514b; background:rgba(255,255,255,.86); border-radius:7px; font-size:9px; font-weight:700; }
.cinema-list { padding-top:34px; }.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:13px}.section-heading h2{margin:0;font-size:19px;letter-spacing:-.03em}.section-heading span{color:#817d76;font-size:11px}
.cards{display:grid;gap:10px}.cinema-card{width:100%;display:flex;align-items:center;gap:13px;padding:13px;border:1px solid #d8d3ca;background:rgba(255,255,255,.67);border-radius:15px;text-align:left}.cinema-card .mask-icon{width:35px;height:40px;flex:0 0 auto}.card-main{min-width:0;flex:1}.card-main strong{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-main span{display:block;margin-top:4px;color:#858078;font-size:10px}.card-score{text-align:right;font-size:11px;font-weight:800}.card-score small{display:block;color:#918c84;font-weight:600;margin-top:3px}
.sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:9}.bottom-sheet{position:fixed;z-index:10;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,760px);padding:10px 20px max(24px,env(safe-area-inset-bottom));background:#faf8f3;border:3px solid var(--ink);border-bottom:0;border-radius:24px 24px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.18)}.sheet-handle{width:42px;height:4px;margin:0 auto 20px;background:#c7c1b8;border-radius:4px}.sheet-close{position:absolute;right:16px;top:13px;border:0;background:transparent;font-size:27px}.sheet-title{margin:0 34px 6px 0;font-size:24px;letter-spacing:-.04em}.sheet-address{margin:0 0 20px;color:#79756e;font-size:12px}.result-row{display:flex;gap:10px;margin-bottom:20px}.result-pill{flex:1;padding:12px;border-radius:12px;background:#eeebe5;font-size:11px}.result-pill strong{display:block;font-size:20px}.vote-question{font-size:13px;font-weight:800;margin:8px 0}.vote-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.vote-button{border:2px solid var(--ink);border-radius:12px;padding:13px 8px;background:#fff;font-size:12px;font-weight:800;box-shadow:3px 3px 0 var(--ink)}.vote-button.good{background:var(--red);color:#fff}.vote-button.bad{background:#777b82;color:#fff}.thanks{padding:18px 0;text-align:center}.thanks strong{display:block;font-size:20px;margin-bottom:6px}.thanks span{color:#77736c;font-size:12px}
.city-modal{position:fixed;z-index:20;left:50%;top:50%;transform:translate(-50%,-50%);width:min(calc(100% - 28px),420px);padding:28px;background:#faf8f3;border:3px solid var(--ink);border-radius:24px;box-shadow:8px 8px 0 var(--ink);text-align:center}.city-modal::before{content:"";position:fixed;z-index:-2;inset:-100vh;background:rgba(20,20,20,.55);backdrop-filter:blur(4px)}.city-modal::after{content:"";position:absolute;z-index:-1;inset:0;background:#faf8f3;border-radius:21px}.city-mask svg{width:48px;height:55px}.city-modal h1{margin:10px 0 5px;font-size:26px;letter-spacing:-.04em}.city-modal>p{margin:0 0 20px;color:#77736c;font-size:12px}.city-modal form{display:flex;gap:8px}.city-modal input{min-width:0;flex:1;height:46px;border:2px solid var(--ink);border-radius:11px;padding:0 12px;outline:none}.city-modal form button{border:0;border-radius:11px;padding:0 14px;background:var(--red);color:#fff;font-size:11px;font-weight:800}.quick-cities{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin-top:13px}.quick-cities button{border:1px solid #d4cfc6;border-radius:99px;padding:7px 10px;background:#fff;font-size:10px;font-weight:700}.city-error{margin:12px 0 0!important;color:var(--red)!important;font-weight:700}
.notice-modal{position:fixed;z-index:22;left:50%;top:50%;transform:translate(-50%,-50%);width:min(calc(100% - 28px),430px);padding:26px;background:#faf8f3;border:3px solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 var(--ink)}.notice-modal::before{content:"";position:fixed;z-index:-2;inset:-100vh;background:rgba(20,20,20,.55);backdrop-filter:blur(4px)}.notice-modal::after{content:"";position:absolute;z-index:-1;inset:0;background:#faf8f3;border-radius:19px}.notice-modal h2{margin:0 32px 14px 0;font-size:24px;letter-spacing:-.04em}.notice-modal p{color:#67635d;font-size:12px;line-height:1.55}.modal-close{position:absolute;right:14px;top:12px;border:0;background:transparent;font-size:25px}.primary-close{width:100%;margin-top:10px;padding:12px;border:0;border-radius:11px;background:var(--ink);color:#fff;font-size:12px;font-weight:800}.notice-modal form{display:grid;gap:8px}.notice-modal label{display:flex;align-items:center;gap:9px;padding:10px;background:#eeebe5;border-radius:10px;font-size:12px;font-weight:700}.notice-modal textarea{min-height:76px;margin-top:4px;padding:10px;border:1px solid #cbc6bc;border-radius:10px;resize:vertical;font:inherit;font-size:12px}.report-link{display:block;width:100%;margin-top:4px;padding:7px;border:0;background:transparent;color:#77736c;text-decoration:underline;font-size:11px}
.svg-defs{position:absolute}
.city-suggestions{max-height:190px;margin-top:8px;overflow:auto;padding:5px;background:#fff;border:1px solid #d4cfc6;border-radius:11px;text-align:left}.city-suggestions button{display:block;width:100%;padding:9px 10px;border:0;border-radius:8px;background:transparent;text-align:left;font-size:11px;font-weight:700}.city-suggestions button:hover,.city-suggestions button:focus{background:#eeebe5}.city-modal .all-cities-note{margin:10px 0 0;color:#77736c;font-size:10px}
.notice-modal input[type="text"]{width:100%;height:44px;padding:0 11px;border:2px solid var(--ink);border-radius:10px;outline:none}.notice-modal .form-question{margin:6px 0 0;color:var(--ink);font-weight:800}
[hidden]{display:none!important}
@media(max-width:600px){.intro-panel-left,.intro-panel-right{width:44%}.intro-panel-center{left:24%;width:52%;clip-path:polygon(22% 0,78% 0,100% 100%,0 100%)}.intro-panel-left{clip-path:polygon(0 0,100% 0,68% 100%,0 100%)}.intro-panel-right{clip-path:polygon(0 0,100% 0,100% 100%,32% 100%)}.intro-mask img{width:72px;height:83px}.intro-mask span{padding:6px 9px;font-size:10px}.intro-loader.is-leaving .intro-panel-left{transform:translate(-110%,-5%)}.intro-loader.is-leaving .intro-panel-right{transform:translate(110%,5%)}}
@media(max-width:600px){.topbar{gap:6px}.map-legend{gap:5px;padding:5px 7px}.map-legend span{gap:0}.map-legend span img{width:22px;height:26px}.map-legend b,.map-legend button{display:none}.city-button{padding:10px 9px}}
@media(min-width:700px){.topbar{left:22px;right:22px;top:18px}.search{top:76px;left:50%;right:auto;width:min(520px,50vw);transform:translateX(-50%)}.search-message{top:128px;left:50%;transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media(max-width:600px){.intro-panel-left,.intro-panel-center,.intro-panel-right{width:100%;left:0;right:auto}.intro-panel-center{clip-path:polygon(0 0,100% 0,50% 69%)}.intro-panel-left{clip-path:polygon(0 0,51% 68%,51% 100%,0 100%)}.intro-panel-right{clip-path:polygon(100% 0,100% 100%,49% 100%,49% 68%)}.intro-loader.is-leaving .intro-panel-left{transform:translate(-110%,15%)}.intro-loader.is-leaving .intro-panel-right{transform:translate(110%,15%)}}