@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Libre+Baskerville:wght@400;700&family=Manrope:wght@400;500;600;700&display=swap";:root{color:#ede8da;font-synthesis:none;background:#111315;font-family:Manrope,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{cursor:pointer}:root{--panel:#1d2021;--line:#f0e8ce1f;--paper:#ece5d3;--muted:#aaa493;--gold:#c9a563;--green:#8fae7a}.onboarding{background:radial-gradient(circle at 16% 78%,#373124 0,#0000 30%),linear-gradient(125deg,#111517,#171a1b);grid-template-columns:1fr 1fr;min-height:100vh;display:grid}.onboarding-copy{border-right:1px solid var(--line);flex-direction:column;justify-content:center;padding:clamp(3rem,10vw,10rem);display:flex}.kicker{color:var(--gold);text-transform:uppercase;letter-spacing:.16em;margin:0 0 14px;font:500 11px DM Mono,monospace}h1,h2,h3{margin:0;font-family:Libre Baskerville,serif;font-weight:400}.onboarding h1{letter-spacing:-.05em;max-width:620px;font-size:clamp(2.8rem,5vw,5.3rem);line-height:1.08}.onboarding-copy>p:not(.kicker){color:#bdb7a8;max-width:535px;margin:28px 0;line-height:1.8}.canon-note{color:#9d9686;border-left:1px solid var(--gold);max-width:490px;padding:12px 15px;font-size:13px;line-height:1.6}.canon-note span{color:var(--gold);margin-right:8px}.onboarding-panel{width:100%;max-width:680px;margin:auto;padding:clamp(2rem,6vw,6rem)}.onboarding label{color:#c1baab;text-transform:uppercase;letter-spacing:.13em;gap:9px;font-size:12px;display:grid}.onboarding input{border:1px solid var(--line);color:var(--paper);background:#101213;outline:none;padding:16px;font-size:16px}.race-heading{color:#c1baab;text-transform:uppercase;letter-spacing:.13em;justify-content:space-between;margin:35px 0 12px;font-size:12px;display:flex}.race-heading small{color:#7e796d;text-transform:none;letter-spacing:0;font-size:12px}.race-grid{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}.race-card{border:1px solid var(--line);color:#ded7c6;text-align:left;background:#191b1c;gap:12px;padding:12px;transition:all .2s;display:flex}.race-card:hover,.race-card.selected{border-color:var(--gold);background:#25251f}.race-card b{width:30px;height:30px;color:var(--gold);border:1px solid #c9a56359;place-items:center;font-family:Libre Baskerville;display:grid}.race-card span{font-size:13px;font-weight:600}.race-card small{color:#898477;margin-top:2px;font-size:11px;font-weight:400;display:block}.primary{background:var(--gold);color:#1d1a13;border:0;justify-content:space-between;width:100%;margin-top:24px;padding:15px 18px;font-weight:700;display:flex}.primary:disabled{color:#aaa493;cursor:not-allowed;background:#504b40}.game-shell{background:#121516;min-height:100vh}.topbar{border-bottom:1px solid var(--line);background:#171a1a;justify-content:space-between;align-items:center;height:74px;padding:0 28px;display:flex}.brand{align-items:center;gap:11px;display:flex}.brand>span{color:var(--gold);font-size:24px}.brand b{font-family:Libre Baskerville;font-size:17px;display:block}.brand small{color:#868174;font-size:11px}.resources{gap:24px;display:flex}.resource{grid-template-columns:12px auto;align-items:center;column-gap:6px;display:grid}.resource i{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:var(--gold);width:9px;height:9px;display:block}.resource i.food{background:#8eaf70}.resource i.timber{background:#a37954}.resource i.stone{background:#a5a59d}.resource i.iron{background:#78838a}.resource span{font:500 14px DM Mono}.resource small{color:#777367;text-transform:uppercase;grid-column:2;font-size:9px}.profile{border:1px solid var(--gold);width:34px;height:34px;color:var(--gold);background:#2c281c;border-radius:50%}.game-layout{grid-template-columns:180px minmax(400px,1fr) 340px;min-height:calc(100vh - 74px);display:grid}.game-layout nav{border-right:1px solid var(--line);flex-direction:column;gap:5px;padding:24px 14px;display:flex}.game-layout nav button{color:#8d897c;text-align:left;background:0 0;border:0;border-left:2px solid #0000;padding:12px;font-size:13px}.game-layout nav button.active{color:var(--paper);border-left-color:var(--gold);background:#c9a56312}.city-area{min-width:0;padding:28px}.city-title{justify-content:space-between;align-items:end;margin-bottom:20px;display:flex}.city-title h2{font-size:30px}.city-tier{color:#888173;text-transform:uppercase;align-items:center;gap:9px;font-size:11px;display:flex}.city-tier b{border:1px solid var(--gold);width:28px;height:28px;color:var(--gold);border-radius:50%;place-items:center;font:14px DM Mono;display:grid}.city-scene{border:1px solid var(--line);background:linear-gradient(#252c2d 0%,#4c554c 47%,#28271f 48%,#191b18 100%);height:min(62vh,640px);position:relative;overflow:hidden}.moon{background:#d9c69c;border-radius:50%;width:95px;height:95px;position:absolute;top:10%;right:18%;box-shadow:0 0 80px #d9c69c4d}.mountains{background:linear-gradient(135deg,#0000 38%,#313b3a 39% 50%,#0000 51%) 0 0/280px 160px;position:absolute;inset:0 0 48%}.fog{filter:blur(25px);background:#cdd3c021;border-radius:50%;width:75%;height:80px;position:absolute}.fog-one{top:38%;left:-16%}.fog-two{top:53%;right:-20%}.road{clip-path:polygon(47% 0,62% 0,100% 100%,0 100%);background:#4b4331;width:24%;height:70%;position:absolute;bottom:-10%;left:43%}.building{color:#e8dfc9;z-index:2;background:0 0;border:0;position:absolute}.building span{white-space:nowrap;text-transform:uppercase;font-size:10px;position:absolute;bottom:-22px;left:50%;transform:translate(-50%)}.keep-building{width:145px;height:150px;bottom:29%;left:43%}.keep-hall{clip-path:polygon(7% 25%,93% 25%,100% 100%,0 100%);background:#797365;border:7px solid #4e4c45;width:105px;height:70px;position:absolute;bottom:0;left:20px}.keep-tower{background:#777269;border:6px solid #4e4c45;width:45px;height:93px;position:absolute;bottom:45px;left:50px}.keep-tower:before{content:"";border-bottom:28px solid #322e2b;border-left:30px solid #0000;border-right:30px solid #0000;position:absolute;top:-27px;left:-13px}.building:not(.keep-building){width:90px;height:90px}.building .house{background:#6e6253;border:4px solid #403c34;width:61px;height:47px;position:absolute;bottom:0;left:15px}.building .roof{z-index:1;border-bottom:38px solid #302c29;border-left:39px solid #0000;border-right:39px solid #0000;position:absolute;top:14px;left:6px}.farm-building{bottom:19%;left:19%}.lumber-building{bottom:33%;right:20%}.quarry-building{bottom:18%;right:31%}.gate{border-top:9px solid #514f47;border-left:9px solid #514f47;border-right:9px solid #514f47;width:27%;height:95px;position:absolute;bottom:8%;left:37%}.gate i{border-right:3px solid #36342e;width:49%;height:100%;display:inline-block}.embers{color:#dca54b;letter-spacing:24px;position:absolute;bottom:17%;left:50%}.city-footer{border:1px solid var(--line);color:#a8a292;border-top:0;align-items:center;gap:8px;padding:13px 15px;font-size:12px;display:flex}.status-dot{background:var(--green);border-radius:50%;width:7px;height:7px}.production{color:#8fae7a;gap:12px;margin-left:auto;font:10px DM Mono;display:flex}.detail-panel{border-left:1px solid var(--line);background:#191c1c}.panel-tabs{border-bottom:1px solid var(--line);display:flex}.panel-tabs button{color:#777367;text-transform:uppercase;background:0 0;border:0;flex:1;padding:18px 0;font-size:12px}.panel-tabs button.active{color:var(--paper);box-shadow:inset 0 -2px var(--gold)}.building-list{border-bottom:1px solid var(--line);gap:5px;padding:12px;display:grid}.building-list>button{text-align:left;color:#bdb7a8;background:0 0;border:1px solid #0000;align-items:center;gap:10px;padding:9px;display:flex}.building-list>button.selected{border-color:var(--line);background:#242624}.building-list b,.building-list small{display:block}.building-list b{color:#ddd6c5;font-size:12px}.building-list small{color:#777367;margin-top:3px;font-size:10px}.building-list em{color:var(--gold);margin-left:auto;font-style:normal}.mini{clip-path:polygon(50% 0,100% 35%,85% 100%,15% 100%,0 35%);background:#625b4e;width:28px;height:28px}.building-detail{padding:26px}.building-detail h3{margin-bottom:12px;font-size:25px}.building-detail>p:not(.kicker){color:#a8a292;font-size:13px;line-height:1.7}.costs{flex-wrap:wrap;gap:6px;margin:20px 0;display:flex}.costs span{color:#b6b09f;text-transform:capitalize;background:#242623;padding:6px 8px;font:10px DM Mono}.costs .insufficient{color:#d27b68}.building-detail .primary{margin-top:10px}.helper{color:#817b6d;margin-top:10px;font-size:10px;line-height:1.5;display:block}.construction{color:#bfb8a6;margin-top:18px;font-size:12px}.construction>b{float:right;color:var(--gold);font-family:DM Mono}.construction>div{background:#383a35;height:4px;margin-top:12px}.construction i{background:var(--gold);height:100%;transition:width .2s;display:block}@media (width<=900px){.resources{gap:10px}.resource small{display:none}.game-layout{grid-template-columns:68px 1fr}.detail-panel{border-left:0;border-top:1px solid var(--line);grid-column:1/-1}.game-layout nav span{display:none}.game-layout nav button{text-align:center}.city-area{padding:18px}.city-scene{height:460px}.onboarding{grid-template-columns:1fr}.onboarding-copy{border-right:0;border-bottom:1px solid var(--line);padding:3rem}}@media (width<=560px){.topbar{height:60px;padding:0 14px}.resources{gap:7px}.resource i{display:none}.resource span{font-size:11px}.game-layout{min-height:calc(100vh - 60px)}.city-title h2{font-size:24px}.city-tier span{display:none}.city-scene{height:390px}.keep-building{left:37%}.farm-building{left:7%}.lumber-building{right:4%}.quarry-building{right:18%}.production{display:none}.onboarding-panel{padding:2rem 1.25rem}.race-grid{grid-template-columns:1fr}.onboarding h1{font-size:2.6rem}}.login-copy{color:#aaa493;margin-top:14px;line-height:1.7}.login-button{margin-top:26px;text-decoration:none}.city-scene{isolation:isolate;background:#151817;height:min(66vh,690px);min-height:500px}.settlement-art{object-fit:cover;object-position:center 56%;filter:saturate(.72)contrast(1.05)brightness(.78);width:100%;height:100%;transition:filter .4s,transform 1.2s;position:absolute;inset:0;transform:scale(1.012)}.city-scene:hover .settlement-art{filter:saturate(.84)contrast(1.05)brightness(.86);transform:scale(1.025)}.scene-vignette{pointer-events:none;background:linear-gradient(90deg,#0a0d0e8a,#0000 32% 68%,#0a0d0e5c),linear-gradient(#090c0c38,#0000 64%,#090c0c94);position:absolute;inset:0}.scene-copy{z-index:1;text-shadow:0 2px 9px #000;gap:4px;display:grid;position:absolute;top:22px;left:24px}.scene-copy span{color:#eee6d7;letter-spacing:.16em;text-transform:uppercase;font:600 11px DM Mono}.scene-copy small{color:#c6bda9;font-size:11px}.scene-marker{z-index:2;color:#f2eadb;text-align:left;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#111413d1;border:1px solid #e7dab94d;grid-template-rows:auto auto;grid-template-columns:9px max-content;align-items:center;column-gap:7px;padding:7px 10px;transition:all .18s;display:grid;position:absolute;box-shadow:0 5px 18px #00000054}.scene-marker:hover,.scene-marker.selected{border-color:var(--gold);background:#1c1d17f0;transform:translateY(-2px);box-shadow:0 8px 22px #0000007a}.scene-marker i{background:#e2b15b;grid-row:1/-1;width:7px;height:7px;transform:rotate(45deg);box-shadow:0 0 0 3px #e2b15b29}.scene-marker span{letter-spacing:.06em;text-transform:uppercase;font-size:10px;font-weight:700}.scene-marker small{color:#b4aa97;font-size:10px}.keep-marker{top:29%;left:53%}.farm-marker{bottom:22%;right:12%}.lumber-marker{bottom:35%;left:10%}.quarry-marker{top:33%;left:8%}.scene-key{z-index:1;color:#ded4c3;text-shadow:0 1px 5px #000;align-items:center;gap:8px;font-size:11px;display:flex;position:absolute;bottom:18px;left:20px}.scene-key i{background:var(--gold);width:7px;height:7px;transform:rotate(45deg)}.status-dot{box-shadow:0 0 8px #8fae7a73}@media (width<=900px){.city-scene{height:560px;min-height:0}.keep-marker{left:51%}.farm-marker{right:8%}.lumber-marker{left:7%}.quarry-marker{left:5%}}@media (width<=560px){.city-scene{height:430px}.scene-copy{top:16px;left:16px}.scene-marker{padding:5px 7px}.scene-marker span{font-size:9px}.scene-marker small{display:none}.keep-marker{top:28%;left:49%}.farm-marker{bottom:25%;right:5%}.lumber-marker{bottom:38%;left:5%}.quarry-marker{top:38%;left:4%}.scene-key{font-size:10px;bottom:13px;left:15px}}