/* Lichterstadt – offene 3D-Welt (lichterstadt-engine.js / lichterstadt-festival.js) */
.nx-city-section { background:linear-gradient(135deg,#1a1238,#22183f 55%,#13233f); }
.nx-city { position:relative; width:100%; height:min(72vh,680px); min-height:420px; margin:0 0 12px; overflow:hidden; border-radius:18px; background:#120c2c; box-shadow:0 0 0 1px #6f6a9c, 0 18px 50px #0008; touch-action:none; user-select:none; -webkit-user-select:none; }
.nx-city__canvas { display:block; width:100%; height:100%; cursor:grab; }
.nx-city__canvas:active { cursor:grabbing; }
.nx-city__hud { position:absolute; top:10px; left:10px; display:flex; flex-wrap:wrap; gap:6px; max-width:calc(100% - 150px); pointer-events:none; }
.nx-city__pill { margin:0; padding:4px 10px; border-radius:999px; background:#140a2bd9; color:#fff; font-size:13px; font-weight:800; box-shadow:0 0 0 1px #ffffff33; }
.nx-city__map { position:absolute; top:8px; right:8px; width:118px; height:118px; border-radius:50%; box-shadow:0 0 0 2px #ffffff55, 0 6px 18px #0007; pointer-events:none; }
.nx-city__tracker { position:absolute; top:46px; left:10px; max-width:min(58%,420px); padding:10px 12px; border-radius:12px; background:#140a2be6; color:#fff; font-size:14px; line-height:1.45; box-shadow:0 0 0 1px #ffd34d66; }
.nx-city__tracker strong { display:block; color:#ffd34d; font-size:13px; }
.nx-city__tracker span { display:block; }
.nx-city__tracker:empty { display:none; }
.nx-city__prompt { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); margin:0; padding:8px 16px; border-radius:999px; background:#ffd34d; color:#1a1033; font-weight:900; font-size:15px; box-shadow:0 6px 18px #0006; pointer-events:none; white-space:nowrap; max-width:calc(100% - 200px); overflow:hidden; text-overflow:ellipsis; }
.nx-city__toast { position:absolute; left:50%; top:14px; transform:translate(-50%,-20px); padding:8px 16px; border-radius:999px; background:#ffffff; color:#1a1033; font-weight:900; font-size:15px; opacity:0; transition:opacity .25s, transform .25s; pointer-events:none; white-space:nowrap; z-index:3; }
.nx-city__toast.is-on { opacity:1; transform:translate(-50%,0); }
.nx-city__toast.is-ok { background:#3ee08f; }
.nx-city__toast.is-level { background:#ffb02e; }
.nx-city__arrow { position:absolute; top:0; left:0; width:36px; height:36px; pointer-events:none; z-index:2; }
.nx-city__arrow::before { content:''; position:absolute; inset:6px; background:#ffd34d; clip-path:polygon(100% 50%,0 0,22% 50%,0 100%); filter:drop-shadow(0 0 4px #000); }
.nx-city__joy { position:absolute; width:100px; height:100px; border-radius:50%; border:2px solid #ffffff88; background:#ffffff18; pointer-events:none; z-index:2; }
.nx-city__joy span { position:absolute; left:28px; top:28px; width:44px; height:44px; border-radius:50%; background:#ffffffcc; }
.nx-city__touch { position:absolute; right:12px; bottom:12px; display:flex; gap:10px; align-items:flex-end; z-index:2; }
.nx-city__touch-btn { min-width:64px; min-height:48px; padding:6px 12px; border:2px solid #ffffff88; border-radius:999px; background:#140a2bd9; color:#fff; font:inherit; font-weight:800; }
.nx-city__touch-btn[aria-pressed="true"] { background:#ffd34d; color:#1a1033; }
.nx-city__touch-btn--main { min-width:96px; min-height:64px; background:#7c2bd9; }
.nx-city__touch-btn:disabled { opacity:.45; }
.nx-city__loading { position:absolute; inset:0; display:grid; place-items:center; margin:0; background:#120c2c; color:#fff; font-weight:800; font-size:18px; z-index:4; }
.nx-city__dialog { position:absolute; left:0; right:0; bottom:0; max-height:80%; overflow:auto; padding:16px 18px 18px; border-radius:18px 18px 0 0; background:#160f33f2; color:#fff; box-shadow:0 -10px 30px #0008; z-index:5; overscroll-behavior:contain; }
.nx-city__dialog h3 { margin:2px 0 6px; color:#fff; font-size:19px; }
.nx-city__eyebrow { margin:0; color:#ffd34d; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.nx-city__say { margin:0 0 8px; line-height:1.55; color:#ece8ff; }
.nx-city__ask { margin:8px 0; font-weight:800; }
.nx-city__choices { display:grid; gap:8px; margin:8px 0; }
.nx-city__choice { display:block; width:100%; min-height:48px; padding:10px 14px; border:2px solid #8f88c4; border-radius:12px; background:#ffffff10; color:#fff; font:inherit; text-align:left; line-height:1.4; cursor:pointer; }
.nx-city__choice:hover:not(:disabled) { border-color:#ffd34d; }
.nx-city__choice:focus-visible { outline:3px solid #ffd984; outline-offset:2px; }
.nx-city__choice:disabled { cursor:default; opacity:.8; }
.nx-city__choice.is-correct { border-color:#3ee08f; background:#1f5a47; opacity:1; }
.nx-city__choice.is-missed { border-color:#e9af94; background:#54352e; opacity:1; }
.nx-city__choice.is-shake { animation:nx-city-shake .4s; }
@keyframes nx-city-shake { 25% { transform:translateX(-6px); } 75% { transform:translateX(6px); } }
.nx-city__verdict { margin:8px 0 4px; font-weight:900; }
.nx-city__verdict.is-ok { color:#3ee08f; }
.nx-city__feedback { margin:6px 0 10px; padding:12px 14px; border-left:5px solid #ffd34d; border-radius:10px; background:#ffffff0d; }
.nx-city__fb-title { margin:0 0 6px; font-weight:900; }
.nx-city__feedback ul { margin:0 0 8px; padding-left:20px; line-height:1.55; }
.nx-city__feedback a, .nx-city__dialog a { color:#b8eafa; }
.nx-city__dialog .nx-games__button { margin-top:6px; }
.nx-city__order { margin:6px 0; padding-left:22px; color:#3ee08f; font-weight:700; line-height:1.5; }
.nx-city__breath { width:120px; height:120px; margin:12px auto 6px; border-radius:50%; background:radial-gradient(circle,#5ee7ff 0,#5ee7ff55 60%,transparent 70%); transform:scale(.55); transition:transform 4s ease-in-out; }
.nx-city__breath.is-in { transform:scale(1); transition-duration:4s; }
.nx-city__breath.is-out { transform:scale(.55); transition-duration:6s; }
.nx-city__breath-label { text-align:center; font-weight:900; font-size:18px; }
.nx-city__keys { margin:0 0 8px; color:#cfc9ef; font-size:13px; }
.nx-city__summary { margin:8px 0 14px; padding-left:20px; line-height:1.7; }
.nx-city__learn { margin:14px 0; padding:14px 16px; border:1px solid #6f6a9c; border-radius:14px; }
.nx-city__learn h4 { margin:0 0 6px; color:#fff; }
.nx-city__learn p { margin:4px 0; }
.nx-city-look { display:flex; flex-wrap:wrap; gap:8px 14px; margin:0 0 18px; padding:12px 14px; border:1px solid #6f6a9c; border-radius:14px; }
.nx-city-look legend { padding:0 6px; font-weight:800; color:#fff; }
.nx-city-look label { display:inline-flex; align-items:center; gap:6px; min-height:40px; cursor:pointer; }
.nx-city-look input { width:20px; height:20px; accent-color:#ffd984; }
.nx-city-look__swatch { display:inline-block; width:22px; height:22px; border-radius:50%; border:2px solid #fff; }
/* Leichte Version ohne 3D */
.nx-city.is-2d { height:auto; min-height:0; overflow:visible; background:transparent; box-shadow:none; touch-action:auto; user-select:auto; -webkit-user-select:auto; }
.nx-city.is-2d .nx-city__canvas, .nx-city.is-2d .nx-city__map, .nx-city.is-2d .nx-city__prompt, .nx-city.is-2d .nx-city__touch, .nx-city.is-2d .nx-city__arrow, .nx-city.is-2d .nx-city__joy, .nx-city.is-2d .nx-city__loading { display:none !important; }
.nx-city.is-2d .nx-city__hud, .nx-city.is-2d .nx-city__tracker, .nx-city.is-2d .nx-city__dialog, .nx-city.is-2d .nx-city__toast { position:static; transform:none; max-width:none; }
.nx-city.is-2d .nx-city__hud { margin-bottom:8px; }
.nx-city.is-2d .nx-city__tracker { margin-bottom:10px; }
.nx-city.is-2d .nx-city__dialog { max-height:none; border-radius:16px; }
.nx-city.is-2d .nx-city__toast { display:inline-block; margin:0 0 8px; }
.nx-city.is-2d ~ .nx-city__keys { display:none; }
@media (max-width:600px) {
  .nx-city { height:min(70vh,560px); min-height:380px; border-radius:14px; }
  .nx-city__map { width:88px; height:88px; }
  .nx-city__hud { max-width:calc(100% - 110px); }
  .nx-city__pill { font-size:12px; }
  .nx-city__tracker { top:auto; bottom:84px; max-width:calc(100% - 20px); font-size:13px; }
  .nx-city__prompt { bottom:auto; top:60px; max-width:calc(100% - 120px); }
}
@media (prefers-reduced-motion:reduce) { .nx-city__toast, .nx-city__breath { transition:none; } .nx-city__choice.is-shake { animation:none; } }
.nx-games .is-app-window .nx-city-section { padding:10px; }
.nx-games .is-app-window .nx-city { height:calc(100dvh - 190px); min-height:320px; max-height:none; }
.nx-arcade-card[data-game="festivalwache"] .nx-arcade-preview-play { color:#ffe3c0; border-color:#f2c89b; }
/* Kiez bei Nacht */
.nx-city-section--kiez { background:linear-gradient(135deg,#0d1030,#1a1238 55%,#2a1036); }
.nx-city__phone .nx-city__choice.is-picked { border-color:#5ee7ff; background:#0e4a5c; }
.nx-arcade-card[data-game="nachtwache"] .nx-arcade-preview-play { color:#b9ffe9; border-color:#c4f4e8; }
/* Radar-Zentrale: Meldungskarten und Hinweise */
.nx-city-section--radar { background:linear-gradient(135deg,#0c1d3a,#132a52 55%,#1a1238); }
.nx-city__card { margin:8px 0 10px; padding:12px 14px; border:1px solid #38bdf8; border-radius:12px; background:#0b1230; }
.nx-city__card-kicker { margin:0 0 4px; color:#7dd3fc; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.nx-city__card-title { margin:0 0 4px; color:#fff; font-size:17px; font-weight:900; line-height:1.35; }
.nx-city__card-meta { margin:0 0 6px; color:#cbd5e1; font-size:14px; }
.nx-city__badges { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 0; }
.nx-games .nx-city__badge { padding:3px 10px; border:1px solid #fbbf24; border-radius:999px; background:#3a2a05; color:#fde68a !important; -webkit-text-fill-color:#fde68a !important; font-size:13px; font-weight:800; }
.nx-city__card-rows { margin:6px 0 0; padding-left:20px; color:#e2e8f0; line-height:1.6; }
.nx-city__clues { margin:6px 0 10px; padding:10px 14px; border-left:5px solid #5ee7ff; border-radius:10px; background:#ffffff0d; }
.nx-city__clues ul { margin:0; padding-left:20px; line-height:1.55; }
.nx-arcade-card[data-game="signalcheck"] .nx-arcade-preview-play { color:#bae6fd; border-color:#7dd3fc; }
.nx-city-section--park { background:linear-gradient(135deg,#0f2a1f,#163a2a 55%,#1a1238); }
.nx-arcade-card[data-game="ankerpfad"] .nx-arcade-preview-play { color:#d9f99d; border-color:#a3e635; }
.nx-city-section--wald { background:linear-gradient(135deg,#132a1c,#1d3a24 55%,#1a1238); }
.nx-arcade-card[data-game="waldpfad"] .nx-arcade-preview-play { color:#bbf7d0; border-color:#4ade80; }