/* Lumen City: a playable world first, compact and accessible controls second. */
:root { --gold:#f0d38d; --cyan:#bde7ce; --muted:#b3c6c1; --line:rgba(221,239,227,.20); }
html,body { overscroll-behavior:none; }
#city-canvas { touch-action:none; }
button,a,select { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,select:focus-visible { outline:3px solid #ffe4a6; outline-offset:3px; }
body[data-city-presentation] .city-topbar { left:24px;right:24px;top:calc(20px + var(--safe-top));min-height:66px;border-radius:18px;padding:10px 12px;grid-template-columns:1fr auto auto;gap:24px; }
body[data-city-presentation] .city-topbar.glass { background:rgba(17,38,41,.94);border-color:rgba(230,243,219,.20);box-shadow:0 8px 30px #122e3320; }
.city-brand .eyebrow {font-size:9px;letter-spacing:.18em;color:#b0c9c0;}
.city-brand h1 {font-size:21px!important;letter-spacing:.04em!important;}
.city-actions {gap:7px;}
.avatar-select {display:none;}
.back-button,.icon-button,.control-button {min-width:44px;min-height:44px;border-radius:11px;background:rgba(255,255,255,.035);}
.control-label {font-size:11px;}
.city-status .status-item:last-child,.city-status .status-divider:last-of-type {display:none;}
#city-hearts {top:calc(104px + var(--safe-top));right:26px;}
.city-intro {position:fixed;z-index:7;left:38px;top:calc(125px + var(--safe-top));pointer-events:none;color:#193d3e;text-shadow:0 1px 18px #e7f1d3;}
.intro-kicker {font-size:10px;font-weight:900;letter-spacing:.18em;display:flex;align-items:center;gap:8px;}
.intro-kicker i {width:6px;height:6px;border-radius:50%;background:#2b7966;}
.city-intro h2 {font-family:Georgia,serif;font-size:clamp(35px,3.8vw,56px);line-height:1.06;letter-spacing:-.04em;margin:14px 0 13px;font-weight:500;}
.city-intro h2 em {font-weight:400;}
.city-intro p {font-size:12px;font-weight:700;}
.city-journey {position:fixed;z-index:18;left:28px;bottom:calc(110px + var(--safe-bottom));width:288px;padding:20px;background:rgba(17,38,41,.96);border:1px solid #d9e6cc33;border-radius:20px;box-shadow:0 16px 46px #102c342b;}
.journey-heading {display:flex;gap:12px;align-items:center;}
.journey-icon {display:grid;place-items:center;width:42px;height:46px;flex:none;background:#ead095;color:#243b36;font:700 20px Georgia,serif;border-radius:10px;}
.journey-eyebrow {font-size:8px;letter-spacing:.15em;color:#c6d4c5;font-weight:900;}
.city-journey h2 {font-size:21px;line-height:1.2;margin:5px 0 0;}
.city-journey p {font-size:11px;line-height:1.6;color:#c4d4cd;margin:14px 0;}
#journey-continue {width:100%;min-height:46px;display:flex;justify-content:space-between;align-items:center;padding:0 15px;background:#f0d38d;border:0;border-radius:10px;color:#183c36;font-size:13px;font-weight:900;}
#journey-continue:hover {background:#ffe6a8;}
.journey-secondary {display:flex;justify-content:space-between;align-items:center;min-height:44px;margin:5px 0 -10px;width:100%;background:none;border:0;color:#c8d7d1;font-size:11px;padding:0 2px;}
.city-detail-open .city-journey,.city-drawer-open .city-journey,.city-detail-open .city-intro,.city-drawer-open .city-intro {display:none;}
.city-view-tools {position:fixed;right:28px;bottom:calc(126px + var(--safe-bottom));z-index:15;display:flex;flex-direction:column;gap:6px;align-items:center;}
.city-view-tools button {width:44px;height:44px;border:1px solid #d9e6cc40;border-radius:12px;background:#163138ed;color:#f3edda;font-size:23px;box-shadow:0 4px 12px #102c3420;}
.view-hint {color:#23443e;text-align:center;line-height:1.5;font-size:10px;font-weight:800;margin-top:5px;text-shadow:0 1px 4px #ebefd0;}
body[data-city-presentation] .city-bottombar {width:760px;max-width:calc(100vw - 48px);min-height:66px;bottom:calc(22px + var(--safe-bottom));border-radius:18px;padding:8px 12px;grid-template-columns:1fr auto 1fr;background:#142f35f2;}
.mode-button {min-height:44px;min-width:65px;font-size:10px;border-radius:10px;}
.mode-button.active {background:#ead095;color:#213e37;border-color:#ead095;}
.mode-button:hover {color:#f8edca;}.mode-button.active:hover {color:#213e37;}
.district-toggle {min-height:44px;}.district-toggle-icon {border:0;background:none;}
.city-districts {left:28px;bottom:calc(110px + var(--safe-bottom));width:360px;max-height:calc(100dvh - 220px);border-radius:20px;background:#142e34f7!important;}
.district-scroll {overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;}
.district-list-button {min-height:64px;border-radius:11px;}
.city-sidepanel {right:26px;top:calc(148px + var(--safe-top));width:330px;background:#142e34f7!important;border-radius:20px;max-height:calc(100dvh - 250px);overflow:auto;touch-action:pan-y;}
.district-cta {min-height:48px;background:#f0d38d;color:#183c36;border:0;}
.district-cta:disabled {background:#385054;color:#b4c6c4;}
.panel-close {min-width:44px;min-height:44px;}
.urban-destination {width:44px!important;height:44px!important;padding:0!important;display:grid;place-items:center;border:2px solid #f5eac9;border-radius:50%;background:#f0d38d;color:#23473c;box-shadow:0 4px 0 #375c4a55,0 5px 15px #122f3940;}
.urban-destination .destination-number {font-size:12px;font-weight:900;line-height:1;}
.urban-destination strong,.urban-destination span,.urban-destination i {display:none!important;}
.urban-destination.locked {background:#17383dd9;color:#d4ded2;border-color:#aec2b580;}
.urban-destination::after {width:0;height:0;bottom:-8px;left:calc(50% - 5px);border:5px solid transparent;border-top-color:#f3e4be;background:transparent;}
.urban-destination:hover,.urban-destination:focus-visible,.urban-destination.selected {background:#fff2bd;color:#143e35;transform-origin:center;border-color:#fff3c9;z-index:2;}
.urban-destination.current {box-shadow:0 0 0 5px #f1d78c30,0 4px 12px #1d3f3c55;}
.urban-destination:hover strong,.urban-destination:focus-visible strong {display:block!important;position:absolute;top:-33px;left:50%;transform:translateX(-50%);background:#15363cf5;color:#fff3d7;font-size:11px;line-height:26px;padding:0 10px;border-radius:7px;overflow:visible;}
.urban-context-notice {z-index:60;max-width:calc(100vw - 32px);}
.city-flight-pad {display:none;position:fixed;z-index:25;left:28px;bottom:calc(110px + var(--safe-bottom));grid-template-columns:repeat(3,48px);gap:6px;}
body[data-camera-mode="fly"] .city-flight-pad {display:grid;}
body[data-camera-mode="fly"] .city-journey,body[data-camera-mode="fly"] .city-intro {display:none;}
.city-flight-pad button {width:48px;height:48px;background:#14343be8;border:1px solid #d0dec480;border-radius:12px;font-size:22px;touch-action:none;}
@media(max-width:1100px){.city-status{display:none;}.city-topbar{gap:12px!important;}.city-intro{top:120px;}.city-intro h2{font-size:40px;}}
@media(max-width:760px){
 body[data-city-presentation] .city-topbar {left:10px;right:10px;top:calc(10px + var(--safe-top));min-height:62px;padding:8px;gap:6px!important;grid-template-columns:1fr auto;}
 .city-brand{gap:7px;}.city-brand .eyebrow{display:none;}.city-brand h1{font-size:16px!important;white-space:nowrap;}.city-actions{gap:3px;}.city-actions .desktop-only{display:none;}.city-actions .control-label{display:none;}
 .back-button,.icon-button,.control-button{width:44px;height:44px;min-height:44px;min-width:44px;}.city-actions #settings-button{display:none;}
 .city-intro{left:23px;top:calc(98px + var(--safe-top));}.intro-kicker{font-size:8px;letter-spacing:.13em;}.city-intro h2{font-size:32px;margin-top:9px;}.city-intro p{display:none;}
 #city-hearts{top:calc(84px + var(--safe-top));right:12px;}
 .city-journey{left:12px;right:12px;bottom:calc(92px + var(--safe-bottom));width:auto;padding:13px 15px;border-radius:17px;}
 .journey-icon{width:36px;height:39px;font-size:17px;}.journey-heading{gap:10px;}.city-journey h2{font-size:18px;margin:3px 0 0;}.city-journey p{margin:8px 0 10px;font-size:10px;}.journey-secondary{display:none;}
 body[data-city-presentation] .city-bottombar{left:12px;right:12px;transform:none;width:auto;max-width:none;min-height:62px;bottom:calc(15px + var(--safe-bottom));padding:6px 8px;grid-template-columns:1fr auto;border-radius:16px;}
 .progress-chip{display:none;}.district-toggle{gap:5px;}.district-toggle-icon{display:none;}.district-toggle strong{font-size:11px;}.district-toggle span span{font-size:9px;}.mode-button{min-width:48px;padding:0 8px;min-height:44px;}
 .city-view-tools{right:12px;bottom:calc(275px + var(--safe-bottom));gap:5px;}.view-hint{display:none;}
 .city-districts{left:12px;right:12px;width:auto;bottom:calc(92px + var(--safe-bottom));max-height:calc(100dvh - 190px);}
 .city-sidepanel{top:auto;right:12px;left:12px;bottom:calc(92px + var(--safe-bottom));width:auto;max-height:calc(100dvh - 190px);padding:17px;}
 .district-metrics{display:none;}.district-description{font-size:12px;line-height:1.6;}.city-sidepanel h2{font-size:25px;}.city-tools-menu{right:12px;top:calc(83px + var(--safe-top));}
 .city-flight-pad{left:12px;bottom:calc(100px + var(--safe-bottom));}.city-toast{bottom:calc(255px + var(--safe-bottom));}
}
@media(max-height:600px) and (orientation:landscape){
 .city-intro{display:none;}.city-journey{left:15px;right:auto;bottom:90px;width:240px;padding:12px;}.city-journey p{margin:6px 0;}.journey-secondary{display:none;}
 .city-sidepanel{left:auto;right:15px;top:85px;bottom:90px;width:310px;max-height:none;}.city-districts{top:85px;bottom:90px;max-height:none;}
 .city-view-tools{bottom:110px;}.city-flight-pad{bottom:90px;}.city-topbar{top:8px!important;}.city-bottombar{bottom:12px!important;}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;}}
/* Closed panels must also leave keyboard and assistive-technology navigation. */
.city-sidepanel:not(.show),.city-districts:not(.show),.city-tools-menu:not(.show) { visibility:hidden; }
.city-sidepanel.show,.city-districts.show,.city-tools-menu.show { visibility:visible; }
@media(max-height:500px) and (orientation:landscape){
 body[data-city-presentation] .city-topbar{min-height:52px;padding:3px 8px;left:14px;right:14px;}
 .city-brand .eyebrow{display:none;}.city-brand h1{font-size:17px!important;}
 body[data-city-presentation] .city-bottombar{min-height:54px;padding:4px 8px;}
 .city-journey{width:220px;padding:12px;bottom:82px;}.city-journey p{display:none;}.city-journey h2{font-size:17px;}.journey-icon{width:34px;height:36px;}.journey-eyebrow{font-size:7px;}#journey-continue{margin-top:10px;}
 .city-view-tools{bottom:90px;}.view-hint{display:none;}.city-sidepanel,.city-districts{top:72px;bottom:80px;}
}

.city-night .city-intro,.city-night .view-hint{color:#e6edd5;text-shadow:0 2px 8px #05192490;}
.city-night .intro-kicker i{background:#d7ce8b;}

/* Review polish: real map icon, readable progress and view hint, touch-aware copy. */
.district-toggle{display:flex;align-items:center;gap:12px;}
.district-toggle-icon{width:36px;height:36px;display:grid;place-items:center;border:1px solid #ead09566!important;border-radius:10px;background:#ead0951a!important;color:#f0d38d;}
.progress-ring::after{content:attr(data-pct);display:grid;place-items:center;color:#e8efe4;font-size:9px;font-weight:900;letter-spacing:-.02em;}
.view-hint{color:#f3efe0;text-shadow:none;background:#163138d9;border:1px solid #d9e6cc33;border-radius:9px;padding:5px 8px;margin-top:8px;}
.city-night .view-hint{color:#f3efe0;text-shadow:none;}
.view-hint .hint-touch{display:none;}
@media(pointer:coarse){.view-hint .hint-fine{display:none;}.view-hint .hint-touch{display:inline;}}
#city-canvas:focus-visible{outline:3px solid #ffe4a6;outline-offset:-3px;}

/* Living-room screens: scale the overlay UI so it stays legible from a sofa.
   The 3D canvas and in-world labels are left at native resolution. */
@media(min-width:2400px) and (min-height:1300px){
 .city-topbar,.city-bottombar,.city-journey,.city-intro,.city-view-tools,#city-hearts,.city-districts,.city-sidepanel,.city-tools-menu,.city-toast,.city-flight-pad,.city-modal-card,.staff-badge{zoom:1.5;}
 .urban-destination{width:66px!important;height:66px!important;border-width:3px;}.urban-destination .destination-number{font-size:18px;}
}
@media(min-width:3400px) and (min-height:1900px){
 .city-topbar,.city-bottombar,.city-journey,.city-intro,.city-view-tools,#city-hearts,.city-districts,.city-sidepanel,.city-tools-menu,.city-toast,.city-flight-pad,.city-modal-card,.staff-badge{zoom:2;}
 .urban-destination{width:88px!important;height:88px!important;border-width:4px;}.urban-destination .destination-number{font-size:24px;}
}

/* ── Town parity: breadcrumb, skills card, Services sections, app nav ──────
   The 5-item bottom nav is the same as the Village, World Travel and Town;
   everything that sat on the bottom edge moves up by its height. */
:root { --nav-h:74px; }
.city-crumbs { position:fixed; z-index:16; left:26px; top:calc(96px + var(--safe-top)); display:flex; flex-wrap:wrap; gap:6px; max-width:calc(100vw - 340px); pointer-events:none; }
.city-crumb { display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:0 11px; border-radius:999px; background:rgba(17,38,41,.88); border:1px solid rgba(230,243,219,.18); color:#e6efe2; font:800 11px/1 "Nunito Sans",system-ui,sans-serif; letter-spacing:.03em; max-width:220px; }
.city-crumb span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.city-crumb.active { background:#f0d38d; color:#183c36; border-color:#f5e3b5; letter-spacing:.12em; }
.city-intro { top:calc(150px + var(--safe-top)); }
.city-skills { position:fixed; z-index:16; right:26px; top:calc(150px + var(--safe-top)); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; width:214px; padding:10px; border-radius:16px; background:rgba(17,38,41,.94)!important; border:1px solid rgba(230,243,219,.2); color:#f3edda; cursor:pointer; text-align:left; }
.city-skills:hover { border-color:#f0d38d88; }
.city-skill { display:flex; align-items:center; gap:7px; min-width:0; padding:5px 6px; border-radius:10px; background:rgba(255,255,255,.04); }
.city-skill.sp { grid-column:1 / -1; background:rgba(240,211,141,.12); }
.city-skill i { font-style:normal; font-size:16px; }
.city-skill b { display:block; font-size:14px; line-height:1.1; }
.city-skill small { display:block; font-size:9px; color:#b9cbc4; text-transform:uppercase; letter-spacing:.08em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.city-detail-open .city-skills, .city-drawer-open .city-skills { display:none; }
.city-tools-menu { max-height:calc(100dvh - 120px - var(--nav-h)); overflow-y:auto; overscroll-behavior:contain; }
.city-tools-menu .tools-section { padding:10px 6px 4px; border-top:1px solid rgba(230,243,219,.12); margin-top:6px; }
.city-tools-menu .tools-heading { display:block; font-size:9px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; color:#b0c9c0; margin:0 4px 7px; }
.city-tools-menu .tools-seg { display:flex; flex-wrap:wrap; gap:6px; }
.city-tools-menu .tools-seg button { display:inline-flex; width:auto; min-height:36px; padding:0 10px; border-radius:10px; font-size:11px; font-weight:800; gap:4px; }
.city-tools-menu .tools-seg button[aria-pressed="true"] { background:#f0d38d; color:#183c36; }
.city-tools-menu .tools-note { margin:6px 4px 0; font-size:10px; color:#b9cbc4; }
.city-tools-menu .tools-skill-sum { display:block; width:100%; text-align:left; }
.city-tools-menu .tools-skill-sum b, .city-tools-menu .tools-skill-sum small { display:block; }
.city-tools-menu .tools-skill-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-top:6px; }
.city-tools-menu .tools-skill { display:block; text-align:center; padding:6px 2px; border-radius:9px; background:rgba(255,255,255,.04); font-size:11px; }
.city-tools-menu .tools-skill small { display:block; font-size:9px; color:#b9cbc4; }
.city-tools-menu .tools-opps { display:grid; gap:4px; }
.city-nav.tm-bottomnav { position:fixed; left:0; right:0; bottom:0; z-index:24; display:none; grid-template-columns:repeat(5,1fr); height:calc(var(--nav-h) + var(--safe-bottom)); padding:6px 8px var(--safe-bottom); background:rgba(14,33,37,.97); border-top:1px solid rgba(230,243,219,.18); box-shadow:0 -6px 24px #0b1d2133; }
body.city-ready .city-nav.tm-bottomnav { display:grid; }
.city-nav .tm-nav-item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; text-decoration:none; color:#eef3e6; font-size:10px; font-weight:900; letter-spacing:.06em; min-height:44px; }
.city-nav .tm-nav-icon { width:44px; height:40px; display:grid; place-items:center; font-size:20px; background:linear-gradient(180deg,#fff3cf,#ecd08d); border-radius:12px; box-shadow:0 2px 0 #0003; }
body[data-city-presentation] .city-bottombar { bottom:calc(10px + var(--nav-h) + var(--safe-bottom)); }
.city-journey, .city-districts, .city-flight-pad { bottom:calc(172px + var(--safe-bottom)); }
.city-districts { max-height:calc(100dvh - 300px); }
.city-view-tools { bottom:calc(188px + var(--safe-bottom)); }
.city-sidepanel { max-height:calc(100dvh - 330px); }
.city-toast { bottom:calc(160px + var(--safe-bottom)); }
@media(max-width:1100px){ .city-crumbs{ max-width:calc(100vw - 300px); } }
@media(max-width:760px){
 :root { --nav-h:62px; }
 .city-crumbs { left:12px; top:calc(80px + var(--safe-top)); max-width:calc(100vw - 130px); }
 .city-crumb { min-height:24px; padding:0 8px; font-size:10px; }
 .city-crumb:nth-child(-n+2):not(:last-child) { display:none; }
 .city-intro { top:calc(116px + var(--safe-top)); }
 .city-skills { display:none; }
 .city-nav .tm-nav-icon { width:38px; height:34px; font-size:18px; border-radius:10px; }
 body[data-city-presentation] .city-bottombar { bottom:calc(8px + var(--nav-h) + var(--safe-bottom)); }
 .city-journey, .city-districts, .city-sidepanel { bottom:calc(144px + var(--safe-bottom)); }
 .city-districts, .city-sidepanel { max-height:calc(100dvh - 250px); }
 .city-flight-pad { bottom:calc(150px + var(--safe-bottom)); }
 .city-view-tools { bottom:calc(330px + var(--safe-bottom)); }
 .city-toast { bottom:calc(320px + var(--safe-bottom)); }
}
@media(max-height:600px) and (orientation:landscape){
 :root { --nav-h:52px; }
 .city-crumbs, .city-skills { display:none; }
 .city-nav .tm-nav-item { flex-direction:row; gap:6px; }
 .city-nav .tm-nav-icon { width:32px; height:30px; font-size:16px; }
 .city-bottombar { bottom:calc(6px + var(--nav-h))!important; }
 .city-journey { bottom:calc(76px + var(--nav-h)); }
 .city-view-tools { bottom:calc(84px + var(--nav-h)); }.city-flight-pad { bottom:calc(76px + var(--nav-h)); }
 .city-sidepanel, .city-districts { bottom:calc(76px + var(--nav-h)); }
}
@media(min-width:2400px) and (min-height:1300px){ .city-crumbs,.city-skills,.city-nav{zoom:1.5;} }
@media(min-width:3400px) and (min-height:1900px){ .city-crumbs,.city-skills,.city-nav{zoom:2;} }