:root {
  color-scheme: dark;
  --ink: #f3f0e8;
  --muted: #aaa89f;
  --line: rgba(255, 255, 255, .14);
  --panel: rgba(23, 24, 25, .88);
  --acid: #d7ff45;
  --orange: #ff653d;
  --ground: #0a0b0b;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--ground); scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 72% 5%, #292e24 0, transparent 26rem), linear-gradient(160deg, #111313, #080909 72%); min-height: 100vh; }
a { color: inherit; }
button, input, select { font: inherit; }

.site-header { min-height: 72px; padding: 0 4vw; display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: center; border-bottom: 1px solid var(--line); background: rgba(8, 9, 9, .88); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(16px); }
.brand { font-weight: 900; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; display: flex; align-items: center; gap: .7rem; }
.brand span { display: grid; place-items: center; width: 34px; height: 34px; background: var(--acid); color: #111; transform: rotate(-5deg); }
nav { display: flex; justify-content: center; gap: 1.5rem; }
nav a, .languages a { color: var(--muted); text-decoration: none; font-size: .82rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
nav a:hover, nav a:focus-visible, .languages a:hover, .languages a[aria-current] { color: var(--acid); }
.languages { display: flex; max-width: 220px; flex-wrap: wrap; justify-content: flex-end; gap: .45rem .7rem; }
.languages a { font-size: .66rem; }

main { overflow: hidden; }
.hero { min-height: 66vh; max-width: 1400px; margin: auto; padding: 9vw 6vw 7vw; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.hero h1, .ads-hero h1, .hero-simple h1 { font-size: clamp(3rem, 8vw, 7.8rem); line-height: .88; letter-spacing: -.065em; max-width: 12ch; margin: .25em 0; text-wrap: balance; }
.hero > p:not(.eyebrow), .ads-hero > p:not(.eyebrow), .hero-simple > p { max-width: 650px; color: var(--muted); font-size: clamp(1rem, 1.8vw, 1.35rem); line-height: 1.55; }
.eyebrow { color: var(--acid); font-size: .72rem; font-weight: 900; letter-spacing: .24em; }
.actions { display: flex; gap: .8rem; margin-top: 1.8rem; flex-wrap: wrap; }
.button, button { border: 1px solid var(--line); color: var(--ink); background: #202322; padding: .9rem 1.15rem; text-decoration: none; font-weight: 800; cursor: pointer; }
.button.primary, form button { color: #10110e; background: var(--acid); border-color: var(--acid); }
.button:hover, button:hover { transform: translateY(-1px); border-color: var(--acid); }
button:disabled { opacity: .55; cursor: wait; }
.radar { position: absolute; right: 7vw; top: 50%; width: min(30vw, 380px); aspect-ratio: 1; border: 1px solid rgba(215, 255, 69, .35); border-radius: 50%; display: grid; place-items: center; background: repeating-radial-gradient(circle, transparent 0 16%, rgba(215, 255, 69, .12) 16.5% 17%); }
.radar::before, .radar::after { content: ""; position: absolute; background: rgba(215, 255, 69, .28); }
.radar::before { width: 100%; height: 1px; }.radar::after { height: 100%; width: 1px; }
.radar i { position: absolute; inset: 0; border-radius: inherit; background: conic-gradient(from 35deg, transparent 0 78%, rgba(215, 255, 69, .35)); animation: scan 5s linear infinite; }
.radar b { color: var(--acid); font-size: 5rem; z-index: 1; }
@keyframes scan { to { transform: rotate(360deg); } }

.partners { border-block: 1px solid var(--line); padding: 2rem 0 2.5rem; }
.partners h2 { max-width: 1400px; margin: 0 auto 1.2rem; padding-inline: 6vw; font-size: .85rem; color: var(--muted); text-transform: uppercase; letter-spacing: .15em; }
.ticker { overflow: hidden; mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); }
.partner-track { width: max-content; display: flex; animation: ticker 38s linear infinite; }
.partner { width: 300px; min-height: 82px; margin-right: 1rem; padding: 1rem; display: flex; gap: .9rem; align-items: center; background: var(--panel); border: 1px solid var(--line); text-decoration: none; }
.partner:hover { border-color: var(--acid); }
.partner img, .partner-mark { width: 48px; height: 48px; object-fit: contain; background: #fff; color: #111; display: grid; place-items: center; font-weight: 900; }
.partner span { display: grid; gap: .2rem; }.partner small { color: var(--muted); line-height: 1.3; }
@keyframes ticker { to { transform: translateX(calc(-50% - .5rem)); } }

.narrow { max-width: 840px; margin: auto; padding: 12vh 5vw; min-height: 70vh; }
.hero-simple h1 { font-size: clamp(3rem, 8vw, 6rem); }
.note { border-left: 3px solid var(--acid); padding-left: 1rem; font-size: .9rem !important; }
.ads-hero { max-width: 1200px; margin: auto; padding: 8vw 5vw 4vw; }
.ads-hero h1 { font-size: clamp(3rem, 7vw, 6.5rem); }

.map-panel { max-width: 1300px; margin: 0 auto 8vw; padding: 3vw; display: grid; grid-template-columns: minmax(230px, .55fr) 1.45fr; gap: 3vw; border: 1px solid var(--line); background: var(--panel); }
.map-panel h2, .workspace h2 { font-size: clamp(2rem, 4vw, 3.5rem); margin: .2em 0; letter-spacing: -.04em; }
.map-panel p { color: var(--muted); line-height: 1.5; }
#zone-output { display: block; min-height: 3rem; margin-top: 2rem; color: var(--acid); font-weight: 800; }
.map-control { margin-top: 1rem; color: var(--muted); }
.map-control input { background: #101312; color: var(--ink); border-color: var(--line); }
.map-control output { color: var(--acid); margin-left: .5rem; }
.city-map-viewport { position: relative; aspect-ratio: 1; overflow: auto; border: 1px solid var(--line); scrollbar-color: var(--acid) #111; }
.city-map-viewport:focus-visible { outline: 3px solid var(--acid); outline-offset: 3px; }
.city-map { --map-zoom: 1; position: relative; width: calc(100% * var(--map-zoom)); aspect-ratio: 1; background: linear-gradient(45deg, transparent 49.5%, rgba(255,255,255,.035) 50%, transparent 50.5%), #111413; }
.city-map::before { content: ""; position: absolute; inset: 15%; border: 4px solid #4c5148; box-shadow: 0 0 40px #000 inset; pointer-events: none; }
.map-zone { --x: 0; --y: 0; --w: 10; --h: 10; position: absolute; left: calc(var(--x) * .1%); top: calc(var(--y) * .1%); width: calc(var(--w) * .1%); height: calc(var(--h) * .1%); padding: 0; background: #343b35; border: 1px solid #6a7367; color: transparent; min-width: 5px; min-height: 5px; }
.map-zone span { position: absolute; opacity: 0; pointer-events: none; }
.map-zone[hidden] { display: none !important; }
.map-zone:hover, .map-zone:focus-visible, .map-zone.selected { background: var(--acid); border-color: #fff; box-shadow: 0 0 18px rgba(215,255,69,.65); z-index: 3; }
.map-wall { background: #7d7137; }.map-landmark { background: var(--orange); clip-path: polygon(50% 0, 100% 100%, 0 100%); }

.workspace { max-width: 1300px; margin: 0 auto 8vw; padding: 5vw; background: #e8e6de; color: #171817; }
.workspace-intro { max-width: 700px; }.workspace-intro p { color: #555a55; line-height: 1.5; }
.workspace details { margin: 2rem 0; border-block: 1px solid #b9bab4; padding: 1rem 0; }
.workspace summary { cursor: pointer; font-weight: 900; font-size: 1.2rem; }
.form-grid, .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; }
form { display: grid; align-content: start; gap: .8rem; padding: 1.2rem; background: #f7f5ee; border: 1px solid #c8c8c1; }
form h3 { margin: 0 0 .5rem; }
label { display: grid; gap: .35rem; color: #4c504b; font-size: .78rem; font-weight: 750; }
input, select { width: 100%; border: 1px solid #b5b7b0; background: #fff; color: #171817; padding: .72rem; min-height: 44px; }
input:focus, select:focus { outline: 3px solid rgba(129, 161, 20, .28); border-color: #667c18; }
#app-status { display: block; min-height: 1.5rem; font-weight: 800; color: #406000; word-break: break-word; }
.owned { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #b9bab4; }
.owned > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .5rem; }
.owned-item { margin: 0; padding: .7rem; background: #f7f5ee; border: 1px solid #c8c8c1; font-size: .82rem; }
.error { color: #c63625 !important; }
.empty { color: var(--muted); padding-inline: 6vw; }
footer { min-height: 120px; display: grid; place-items: center; padding: 2rem; color: var(--muted); border-top: 1px solid var(--line); text-align: center; }

@media (max-width: 900px) {
  .site-header { grid-template-columns: auto 1fr; padding-block: .8rem; }.site-header nav { order: 3; grid-column: 1/-1; justify-content: flex-start; overflow-x: auto; padding-bottom: .2rem; }.languages { justify-self: end; }
  .radar { opacity: .22; right: -12vw; width: 60vw; }.hero { padding-block: 18vw 12vw; }.hero h1 { max-width: 10ch; }
  .map-panel { grid-template-columns: 1fr; margin-inline: 1rem; }.form-grid, .steps { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }.radar i, .partner-track { animation: none; }.partner-track .partner[aria-hidden="true"] { display: none; }
}
.moderation-item{display:grid;grid-template-columns:112px 1fr auto;align-items:center;gap:14px;padding:12px 0;border-top:1px solid rgba(255,255,255,.12)}
.moderation-item img{width:112px;height:72px;object-fit:contain;background:#090b0a;border:1px solid rgba(255,255,255,.2)}
.moderation-details{display:grid;grid-template-columns:minmax(8rem,max-content) minmax(0,1fr);gap:4px 10px;margin:0;min-width:0;font-size:.82rem}
.moderation-details dt{font-weight:800}.moderation-details dd{margin:0;overflow-wrap:anywhere}.moderation-item div{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:700px){.moderation-item{grid-template-columns:1fr}.moderation-item img{width:100%;height:140px}}