@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');
:root{--ink:#193b35;--paper:#faf8ef;--yellow:#f7d65b;--green:#397558}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font:14px 'DM Sans',sans-serif}button,input{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #db843c;outline-offset:3px}header{height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #d8dfd2}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit;font:700 27px Outfit,sans-serif}.brand img{width:55px;height:55px;object-fit:cover;border-radius:50%}.brand small{display:block;font:600 8px 'DM Sans',sans-serif;letter-spacing:2px;margin-top:4px}.live{font-size:12px;color:#64756a;display:flex;align-items:center;gap:8px}.live i,.dot{display:inline-block;width:7px;height:7px;background:#6a9f71;border-radius:50%}.yellow{background:var(--yellow);border:1px solid #dfbd41;padding:13px 20px;border-radius:9px;font-weight:700}.yellow span{margin-left:20px}main{display:grid;grid-template-columns:minmax(0,1fr) 354px;height:calc(100dvh - 88px)}.map{position:relative;overflow:hidden;background:#9cc9bb}canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}.welcome{position:absolute;left:30px;top:27px;pointer-events:none}.eyebrow{font-size:9px;font-weight:700;letter-spacing:1.8px}h1{font:600 clamp(28px,3.2vw,47px)/1.06 Outfit,sans-serif;letter-spacing:-1.7px;margin:13px 0}h1 em{font-style:normal;color:#3b6851}.welcome p{color:#4d6e5d;font-size:12px;margin:0}#search{position:absolute;top:196px;left:30px;width:290px;display:flex;align-items:center;gap:9px;background:#fffdf5;box-shadow:0 4px 20px #193b3515;border:1px solid #d1d8c8;border-radius:11px;padding:7px 8px 7px 15px}#search>span{font-size:29px;line-height:24px}input{min-width:0;width:100%;border:0;background:none;outline:none;color:var(--ink);font-size:12px}#search button{border:0;background:var(--ink);color:white;border-radius:7px;width:34px;height:34px;flex-shrink:0}.zones{position:absolute;left:25px;right:70px;bottom:61px;display:flex;gap:7px;flex-wrap:wrap}.zones button{border:1px solid #e7e6d8;background:#fffdf3eF;border-radius:8px;padding:11px 13px;font-size:11px;font-weight:700;box-shadow:0 3px 10px #173d3210}.zones button.active{background:var(--ink);color:white;border-color:var(--ink)}.mapnote{position:absolute;bottom:24px;left:30px;font-size:11px;display:flex;gap:8px;align-items:center}.hint{position:absolute;bottom:25px;right:24px;color:#476e60;font-size:10px}.controls{position:absolute;right:20px;bottom:70px;display:grid;gap:6px}.controls button{border:1px solid #d8dfcf;background:var(--paper);width:38px;height:38px;border-radius:9px;font-size:23px;box-shadow:0 2px 5px #193b3510}.compass{position:absolute;right:30px;top:28px;text-align:center;font-size:10px;opacity:.6}.compass span{display:block;font-size:26px}aside{background:var(--paper);padding:27px 24px;overflow-y:auto;border-left:1px solid #d3ddce}.asidehead h2{font:600 27px/1.1 Outfit,sans-serif;letter-spacing:-.6px;margin:12px 0}.asidehead h2 span{color:#d3a441;margin-left:7px}.asidehead p{font-size:12px;color:#798173;line-height:1.6}.stats{display:flex;justify-content:space-between;border-top:1px solid #e3e5d8;border-bottom:1px solid #e3e5d8;padding:19px 0;margin:21px 0}.stats div{display:grid;gap:4px;flex:1;text-align:center;border-right:1px solid #e3e5d8}.stats div:last-child{border:0}.stats b{font:600 27px Outfit}.stats span{font-size:10px;color:#788372}.row{display:flex;justify-content:space-between;align-items:center;gap:7px}.next{border:1px solid #d9dfca;border-radius:13px;background:#f1f2e5;padding:17px}.next .eyebrow{font-size:8px;letter-spacing:1.1px}.pill{background:#e2e8d6;font-size:8px;font-weight:700;border-radius:5px;padding:5px 6px;white-space:nowrap}.building{font-size:51px;padding:17px 0 7px;text-align:center}.next h3{font:600 20px Outfit;margin:8px 0}.next p{font-size:11px;color:#7c8370}.progress{height:7px;border-radius:5px;background:#dce2cb;margin:19px 0 10px;overflow:hidden}.progress span{display:block;background:var(--green);height:100%;width:0}.next .row b,.next .row>span:last-child{font-size:10px}.goals{margin-top:24px}.goals h3{font:600 18px Outfit;margin:0}.muted{font-size:8px;letter-spacing:1px;color:#939984}.goal{width:100%;text-align:left;display:flex;gap:11px;align-items:center;border:0;border-bottom:1px solid #e7e8dc;background:none;padding:13px 0}.goal .icon{background:#eeeee3;border-radius:8px;padding:9px;font-size:17px}.goal b{font-size:11px;display:block}.goal small{color:#919783;font-size:10px;display:block;margin-top:3px}.goal .lock{margin-left:auto;color:#8b9685;font-size:12px}.invitation{margin-top:24px;border-radius:11px;background:#f8e7a4;padding:14px 12px;display:flex;gap:10px;align-items:center}.invitation>span{font-size:22px}.invitation b{font-size:12px}.invitation p{font-size:10px;line-height:1.5;margin:5px 0 0}.invitation button{border:0;background:none;font-size:22px}footer{margin-top:23px;font-size:10px;color:#7d8979;line-height:1.8}footer span{font-size:9px}#notice{position:absolute;top:252px;left:30px;max-width:290px;background:#fffdf5;border-radius:8px;font-size:12px;padding:0;box-shadow:0 4px 12px #193b3510}#notice:not(:empty){padding:12px}dialog{border:1px solid #cfdac8;border-radius:20px;color:var(--ink);background:var(--paper);max-width:430px;width:calc(100% - 32px);padding:32px;box-shadow:0 22px 100px #16372a55}dialog::backdrop{background:#173a3266;backdrop-filter:blur(5px)}dialog .close{position:absolute;right:12px;top:8px;font-size:27px;border:0;background:none}dialog h2{font:600 30px Outfit}dialog p,dialog li{line-height:1.7;color:#61715e}dialog .big{font-size:55px}dialog li{margin:12px 0}dialog .tag{display:inline-block;border-radius:20px;padding:6px 12px;background:#e8eddb;font-size:12px}dialog dl{display:grid;grid-template-columns:1fr 1fr;gap:12px}dialog dd{margin:0;font-weight:700}@media(min-width:1500px){main{grid-template-columns:minmax(0,1fr) 390px}aside{padding:30px}}@media(max-width:850px){header{padding:0 18px;height:74px}.brand{font-size:23px}.brand img{width:43px;height:43px}.live{display:none}main{height:auto;display:block}.map{height:76dvh;min-height:580px}aside{border-left:0;padding:26px;overflow:visible}.welcome{left:20px;top:22px}h1{font-size:35px}#search{left:20px;top:177px;width:270px}#notice{left:20px;top:230px}.zones{left:17px;bottom:62px;right:65px;gap:5px}.zones button{padding:10px;font-size:10px}.hint{display:none}.mapnote{left:20px;font-size:10px}.yellow{font-size:11px;padding:11px}.yellow span{margin-left:8px}.brand small{font-size:6px;letter-spacing:1.3px}.goals{margin-top:25px}.stats{margin-top:16px}.next .building{font-size:45px}.compass{right:20px}header .brand{gap:7px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* A clear canvas and a separate home card: the house always remains visible. */
[hidden]{display:none!important}#worldLabels{position:absolute;inset:0;pointer-events:none;overflow:hidden}#worldLabels button{position:absolute;top:0;left:0;white-space:nowrap;pointer-events:auto;border:1px solid #ffffff70;box-shadow:0 4px 15px #193b3517;font:600 10px 'DM Sans',sans-serif;padding:8px 12px;border-radius:7px;backdrop-filter:blur(8px)}.world-zone{background:#fff9e9ed;color:#294c3d}.world-goal.locked{background:#293e42e8;color:#f5ecd4}.world-goal.built{background:#f4e5b9ee;color:#294c3d}#loading3d{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:20px;background:#faf8eff0;border-radius:14px;max-width:330px;text-align:center;font-size:13px}.map{background:#a8cec6}.welcome{z-index:2;text-shadow:0 1px 15px #e5f0dc}.welcome h1{font-size:clamp(28px,2.9vw,42px)}#search{z-index:3}.controls,.zones{z-index:4}#notice{z-index:5}.visiting .welcome{display:none}.visiting #search{top:25px}.visiting #notice{top:83px}.visiting #worldLabels{opacity:.4}.resident-emblem{width:82px;height:82px;border-radius:25px;background:#f1e6c6;display:grid;place-items:center;font-size:46px;margin:28px 0 17px}.house-number{display:block;font-size:9px;font-weight:700;letter-spacing:2px;color:#869175}#residentCard h2{font:600 29px Outfit;margin:9px 0;overflow-wrap:anywhere;letter-spacing:-.7px}.resident-intro{line-height:1.7;font-size:12px;color:#7b8771}.back-city{display:block;background:none;border:0;padding:0 0 30px;font-size:11px;color:#60785f}.resident-zone{padding:12px 14px;border:1px solid #dbe2cb;background:#eef1e2;border-radius:9px;margin-top:22px;font-size:12px;font-weight:600}.tenure{display:flex;align-items:center;gap:15px;border-bottom:1px solid #dce2d0;padding:27px 0}.tenure strong{font:600 57px Outfit;color:#3c7558;line-height:1}.tenure span{font-size:12px;line-height:1.6;color:#78856c}.resident-details dt{font-size:10px;color:#8a957e;margin-top:20px}.resident-details dd{margin:5px 0;font-size:12px;font-weight:600}.home-note{display:flex;gap:8px;align-items:start;padding:18px 0;font-size:11px;line-height:1.6;color:#7f8d72}.home-note i{width:10px;height:10px;flex-shrink:0;border:2px solid #d3ae46;border-radius:50%;margin-top:3px}#recenter{width:100%;margin-top:8px}.visiting .mapnote{background:#fdf5dfd9;padding:8px;border-radius:7px}@media(max-width:850px){.visiting main{display:flex;flex-direction:column}.visiting .map{height:62dvh;min-height:410px;flex-shrink:0}.visiting aside{padding:20px}.visiting #residentCard{display:grid;grid-template-columns:75px 1fr;gap:0 15px}.visiting .back-city{grid-column:1/-1;padding-bottom:18px}.visiting #residentCard>.eyebrow{grid-column:1/-1}.visiting .resident-emblem{grid-column:1;grid-row:3/6;width:65px;height:65px;font-size:36px;margin:16px 0}.visiting .house-number{grid-column:2;margin-top:16px}.visiting #residentCard h2{grid-column:2;font-size:24px}.visiting .resident-intro{display:none}.visiting .resident-zone{grid-column:1/-1;margin-top:15px}.visiting .tenure{grid-column:1/-1;padding:18px 0}.visiting .resident-details,.visiting .home-note,.visiting #recenter{grid-column:1/-1}.visiting .zones{bottom:48px}.visiting .mapnote{bottom:5px}.visiting #search{top:16px;width:245px}.visiting .controls{bottom:80px}.visiting .compass{top:70px}#worldLabels button{font-size:9px;padding:7px 9px}}