@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root { --ink:#272429; --paper:#f7f2e9; --cream:#fffaf1; --line:#d8d0c4; --orange:#e96d46; --teal:#2c8881; --yellow:#f1c84c; --muted:#8f8a82; }
* { box-sizing:border-box; }
body { margin:0; background:#ded8ce; color:var(--ink); font-family:'Space Grotesk',sans-serif; }
button { font:inherit; cursor:pointer; color:inherit; }
.is-hidden { display:none !important; }
.boot-screen,.lobby-screen { position:fixed; inset:0; z-index:20; background:var(--ink); color:var(--cream); overflow:hidden; }
.boot-screen { display:grid; place-items:center; }
.boot-content { position:relative; z-index:2; width:min(420px,84vw); text-align:center; }.boot-mark { margin:0 auto 30px; background:var(--orange); }.boot-content .eyebrow { margin-bottom:20px; }.boot-content h1 { color:var(--cream);font-size:28px;line-height:1.6;letter-spacing:.05em; }.boot-content h1 em { color:var(--yellow);font-style:normal; }.loading-track { height:10px;margin-top:45px;border:2px solid var(--cream);padding:2px;text-align:left; }.loading-track i { display:block;width:0;height:100%;background:var(--orange);transition:width .2s ease; }.loading-meta { display:flex;justify-content:space-between;margin-top:12px;color:#aaa39a;font:9px 'DM Mono',monospace; }.loading-meta b { color:var(--yellow);font-weight:400; }.boot-skyline { position:absolute;left:0;right:0;bottom:0;height:31vh;opacity:.25;background:linear-gradient(135deg,transparent 45%,#53645d 45%,#53645d 55%,transparent 55%) 0 0/80px 80px; }.boot-skyline span { position:absolute;bottom:0;width:8%;background:#514d4d;border-top:4px solid #6b635a; }.boot-skyline span:nth-child(1){height:36%;left:5%}.boot-skyline span:nth-child(2){height:70%;left:19%}.boot-skyline span:nth-child(3){height:44%;left:37%}.boot-skyline span:nth-child(4){height:85%;left:59%}.boot-skyline span:nth-child(5){height:52%;left:83%}
.lobby-screen { display:grid;place-items:center;background:#b8d6c8; }.lobby-screen:before { content:'';position:absolute;inset:0;opacity:.25;background-image:linear-gradient(30deg,#83b8aa 12%,transparent 12.5%,transparent 87%,#83b8aa 87.5%),linear-gradient(150deg,#83b8aa 12%,transparent 12.5%,transparent 87%,#83b8aa 87.5%);background-size:55px 95px; }.lobby-card { position:relative;width:min(500px,calc(100% - 32px));padding:30px 42px 25px;background:var(--cream);border:1px solid var(--ink);box-shadow:7px 7px 0 var(--ink);text-align:center; }.lobby-brand { display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:44px;font:9px 'Press Start 2P',monospace; }.lobby-brand .brand-mark { width:30px;height:30px;margin:0;box-shadow:2px 2px 0 var(--ink);font-size:8px; }.lobby-card h1 { font-size:24px;line-height:1.6; }.lobby-intro { margin:18px 0 30px;color:#827a71;font-size:14px; }.lobby-action { position:relative;width:100%;padding:18px 42px 18px 18px;text-align:left;border:1px solid var(--ink);background:var(--yellow);box-shadow:3px 3px 0 var(--ink); }.lobby-action strong,.lobby-action small { display:block; }.lobby-action strong { font:10px 'Press Start 2P',monospace; }.lobby-action small { margin-top:8px;color:#665744;font:11px 'DM Mono',monospace; }.lobby-action span { position:absolute;right:19px;top:22px;font-size:25px; }.lobby-or { display:flex;align-items:center;gap:12px;margin:23px 0;color:#a29b91;font:8px 'Press Start 2P',monospace; }.lobby-or i { height:1px;flex:1;background:var(--line); }.pin-label { display:block;text-align:left;color:#7e766c;font:8px 'Press Start 2P',monospace;margin-bottom:9px; }.join-row { display:flex;gap:8px; }.join-row input { flex:1;min-width:0;border:1px solid var(--line);background:white;padding:13px;font:18px 'DM Mono',monospace;letter-spacing:.18em;text-align:center; }.join-row button,.start-game-button { background:var(--orange);color:#fff;border:1px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:0 15px;font:9px 'Press Start 2P',monospace; }.lobby-error { min-height:17px;color:var(--orange);font:10px 'DM Mono',monospace;margin-top:12px; }.room-created { padding:5px 0 3px; }.room-label { color:var(--orange);font:9px 'Press Start 2P',monospace; }.room-created strong { display:block;margin:14px 0;font:38px 'DM Mono',monospace;letter-spacing:.18em; }.room-created p { color:#827a71;font:11px 'DM Mono',monospace;line-height:1.6; }.waiting-dots { display:flex;justify-content:center;align-items:center;gap:5px;margin:23px 0 25px;color:#938b81;font:8px 'Press Start 2P',monospace; }.waiting-dots i { width:6px;height:6px;border-radius:50%;background:var(--teal); }.waiting-dots i:nth-child(2){opacity:.65}.waiting-dots i:nth-child(3){opacity:.3}.waiting-dots span { margin-left:6px; }.start-game-button { width:100%;padding:15px;text-align:left; }.start-game-button span { float:right;font-size:17px; }.lobby-footnote { margin-top:25px;color:#aaa198;font:9px 'DM Mono',monospace; }
.game-shell { max-width:1560px; min-height:100vh; margin:auto; background:var(--paper); box-shadow:0 0 0 1px #cbc3b6; }
.topbar { height:86px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; border-bottom:1px solid var(--line); background:var(--cream); }
.brand-lockup,.top-actions,.season-status,.turn-clock,.card-heading,.drawer-title,.wallet-top { display:flex; align-items:center; }
.brand-mark { width:42px; height:42px; display:grid; place-items:center; margin-right:12px; background:var(--orange); color:#fff8e9; border:2px solid var(--ink); transform:rotate(-4deg); box-shadow:3px 3px 0 var(--ink); font:12px 'Press Start 2P',monospace; }
.eyebrow { margin:0 0 7px; color:var(--orange); font:9px 'Press Start 2P',monospace; letter-spacing:.04em; text-transform:uppercase; }
h1,h2,h3,p { margin:0; } h1 { font:16px 'Press Start 2P',monospace; letter-spacing:.03em; } h2 { font:17px 'Press Start 2P',monospace; } h3 { font:12px 'Press Start 2P',monospace; }
.season-status { gap:11px; color:var(--ink); font:10px 'DM Mono',monospace; letter-spacing:.08em; } .status-dot { width:8px;height:8px;border-radius:50%;background:var(--teal); box-shadow:0 0 0 4px #d9ede6; }.status-divider { height:17px;border-left:1px solid var(--line); }.muted { color:var(--muted); }.top-actions { gap:8px; }.icon-button,.help-button { border:1px solid var(--line); background:transparent; width:35px;height:35px; }.help-button { border-radius:50%; background:var(--ink);color:white; font-weight:bold; }
.game-layout { display:grid; grid-template-columns:minmax(0,1fr) 326px; }.map-column { padding:35px 38px 38px; min-width:0; }.map-toolbar { display:flex; justify-content:space-between; align-items:end; margin-bottom:25px; }.turn-clock { gap:10px; }.clock-icon { font-size:31px; color:var(--orange); }.turn-clock strong,.clock-label { display:block; }.clock-label { color:var(--muted); font:9px 'Press Start 2P',monospace; margin-bottom:7px; }.turn-clock strong { font:16px 'DM Mono',monospace; }.advance-button { margin-left:23px; padding:13px 15px; border:1px solid var(--ink); background:var(--yellow); font:9px 'Press Start 2P',monospace; box-shadow:3px 3px 0 var(--ink); }.advance-button span { font-size:18px; margin-left:7px; vertical-align:-2px; }
.map-frame { background:#b7d8ca; border:1px solid var(--ink); box-shadow:5px 5px 0 var(--ink); overflow:hidden; }.map-legend { height:43px; display:flex; align-items:center; gap:22px; padding:0 17px; background:var(--cream); border-bottom:1px solid var(--line); color:#6d6963; font:8px 'DM Mono',monospace; }.legend-dot { display:inline-block; width:8px;height:8px;border-radius:50%; margin-right:6px; border:1px solid var(--ink); }.legend-dot.owned { background:var(--orange); }.legend-dot.open { background:white; }.legend-dot.auction { background:var(--yellow); }
.city-map { height:490px; position:relative; overflow:hidden; background-color:#b7d8ca; background-image:linear-gradient(30deg,#a5cbbc 12%,transparent 12.5%,transparent 87%,#a5cbbc 87.5%,#a5cbbc),linear-gradient(150deg,#a5cbbc 12%,transparent 12.5%,transparent 87%,#a5cbbc 87.5%,#a5cbbc),linear-gradient(30deg,#a5cbbc 12%,transparent 12.5%,transparent 87%,#a5cbbc 87.5%,#a5cbbc),linear-gradient(150deg,#a5cbbc 12%,transparent 12.5%,transparent 87%,#a5cbbc 87.5%,#a5cbbc),linear-gradient(60deg,#98c1b3 25%,transparent 25.5%,transparent 75%,#98c1b3 75%); background-position:0 0,0 0,20px 35px,20px 35px,0 0; background-size:40px 70px; }
.road { position:absolute; background:#e8d9bc; opacity:.9; transform:rotate(-30deg); width:120%; height:43px; left:-10%; top:43%; border-top:2px solid #d4c39e;border-bottom:2px solid #d4c39e; }.road-two { top:67%; transform:rotate(29deg); }.river { position:absolute; width:75px;height:120%; background:#83bdc6;right:5%;top:-10%;transform:rotate(18deg); opacity:.65; border-left:2px solid #6eaab4;border-right:2px solid #6eaab4; }.district-label { position:absolute; color:#63988b; font:8px 'Press Start 2P',monospace; opacity:.8; }.label-harbor { left:5%;top:7%; }.label-market { right:17%;top:9%; }.label-park { left:7%;bottom:12%; }.label-south { right:26%;bottom:9%; }
.map-property { position:absolute; left:var(--x);top:var(--y); width:104px;height:92px; border:0; background:transparent; transform:translate(-50%,-50%); z-index:2; }.map-property .building { position:absolute; left:50%; transform:translateX(-50%); bottom:24px; }.map-property b { position:absolute; bottom:2px; left:50%; transform:translateX(-50%); padding:4px 6px; background:#f9edcf; border:1px solid #a99373; color:#665844; font:8px 'DM Mono',monospace; white-space:nowrap; }.map-property:hover .building,.map-property:focus .building { filter:drop-shadow(0 0 7px white); transform:translateX(-50%) translateY(-4px); }.owned-property b { background:var(--orange);color:#fff; border-color:#bd5435; }.auction-property b { background:var(--yellow); }.building { display:block; position:relative; width:54px;height:34px; background:#d47755; border:2px solid #3d3735; box-shadow:0 7px 0 #527b70; }.building:before { content:''; position:absolute; width:40px;height:31px; left:5px; top:-19px; background:#efaf68; border:2px solid #3d3735; transform:skewY(-30deg) rotate(30deg); }.building:after { content:''; position:absolute; width:12px;height:17px;left:20px;bottom:0;background:#765854;border:2px solid #3d3735; }.house-b { background:#7899a3; }.house-b:before { background:#d79b62; }.house-c { background:#bd665e; width:65px; }.house-c:before { background:#efc16b; }.house-d { background:#6d8583; }.house-d:before { background:#ca8b70; }.town-hall { position:absolute; left:51%;top:46%; transform:translate(-50%,-50%); text-align:center;color:#795f57; font:8px 'Press Start 2P',monospace; }.town-hall span { display:block;margin:auto auto 8px;width:45px;height:43px;background:#e9b66a;border:2px solid #625047; padding-top:9px;font-size:20px; }.map-compass { position:absolute;right:19px;bottom:17px;text-align:center;color:#4b827c;font:10px 'Press Start 2P',monospace; }.map-compass i { display:block;font-size:20px;font-style:normal; }.map-compass small { font-size:8px; }.map-footer { display:flex; justify-content:space-between; align-items:center; height:40px;padding:0 17px;background:var(--cream);color:#8d877e;font:8px 'DM Mono',monospace; }.map-footer button { border:0;background:transparent;font-size:18px;margin-left:10px;color:var(--orange); }
.bottom-grid { display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:27px; }.auction-card,.feed-card { background:var(--cream);border:1px solid var(--line);padding:19px; }.card-heading { justify-content:space-between; }.auction-tag { background:var(--yellow);padding:7px 9px;font:8px 'Press Start 2P',monospace; }.auction-content { display:flex;align-items:center;gap:18px;margin-top:19px; }.auction-art { width:88px;height:78px;display:grid;place-items:center;background:#c4d9c4;position:relative; }.auction-art .building { transform:scale(.8); }.auction-art i { position:absolute;right:5px;top:4px;width:20px;height:20px;border-radius:50%;background:var(--orange);color:white;text-align:center;padding-top:2px;font:bold 13px sans-serif;font-style:normal; }.auction-content strong { font:10px 'Press Start 2P',monospace; }.auction-content p { color:#77716a;font-size:12px;line-height:1.4;margin:8px 0; }.text-button { padding:0;border:0;background:none;color:var(--orange);font:9px 'Press Start 2P',monospace; }.text-button span {font-size:15px;}.more-button {border:0;background:none;color:#888;letter-spacing:3px}.feed-item { display:flex;align-items:center;gap:10px;margin-top:16px;font-size:12px; }.feed-avatar { width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:bold;color:white; }.avatar-pink {background:#d88e83}.avatar-green {background:#5e9a83}.feed-item p { flex:1;line-height:1.35 }.feed-item small {display:block;color:#a09a90;font-size:10px}.feed-amount { color:var(--teal);font:11px 'DM Mono',monospace}.feed-amount.neutral {color:#777;}
.sidebar { background:#eee7dc;border-left:1px solid var(--line);padding:35px 23px;display:flex;flex-direction:column; }.sidebar-heading {display:flex;align-items:end;justify-content:space-between;margin-bottom:22px}.sidebar-heading h2 {font-size:13px}.sidebar-heading h2 span {color:var(--orange);font-size:11px}.invite-button {border:1px solid var(--ink);background:transparent;padding:8px 9px;font:8px 'Press Start 2P',monospace}.player-list {border-top:1px solid var(--line)}.player-row {display:flex;align-items:center;gap:10px;padding:13px 8px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .15s}.player-row:hover,.player-row.active {background:#f8f1e6;margin:0 -8px;padding-left:16px;border-left:3px solid var(--orange)}.avatar {width:35px;height:35px;display:grid;place-items:center;border-radius:9px;border:2px solid #393637;color:white;font:12px 'Press Start 2P',monospace;box-shadow:2px 2px 0 #393637}.avatar.mara {background:#df876c}.avatar.jude {background:#74a78a}.avatar.otto {background:#7a8fc0}.avatar.nell {background:#c5985d}.avatar.you {background:#e3b643}.avatar.ima {background:#9d7ca8}.avatar.bram {background:#699da4}.avatar.faye {background:#c17b91}.player-details {flex:1}.player-details strong {font-size:13px}.player-details small {display:block;color:#938c83;font:10px 'DM Mono',monospace;margin-top:3px}.player-money {font:11px 'DM Mono',monospace}.player-money.green {color:var(--teal)}.active .player-money {color:var(--orange)}.sidebar-tip {display:flex;gap:12px;padding:15px 2px;margin-top:auto;border-top:1px solid var(--line);color:#80786e;font-size:11px;line-height:1.4}.sidebar-tip span {color:var(--orange);font-size:20px}.sidebar-tip b {color:var(--ink)}.wallet {padding:16px;background:var(--ink);color:#fff5df;margin-top:16px}.wallet-top {justify-content:space-between;font:8px 'Press Start 2P',monospace;color:#afa79a}.wallet-change {color:#9cd1a7;font:9px 'DM Mono',monospace}.wallet strong {display:block;font:25px 'DM Mono',monospace;margin:12px 0}.wallet-bar {height:5px;background:#554f4c}.wallet-bar i {display:block;width:62%;height:100%;background:var(--yellow)}.wallet p {font:10px 'DM Mono',monospace;color:#a9a095;margin-top:10px}.wallet p span {float:right;color:var(--yellow);font-size:17px}
.property-drawer { position:fixed;z-index:5;top:0;right:0;width:min(430px,100%);height:100vh;padding:45px 33px;background:var(--cream);border-left:1px solid var(--ink);box-shadow:-6px 0 0 rgba(39,36,41,.15);transform:translateX(105%);transition:transform .3s ease; }.property-drawer.open {transform:translateX(0)}.close-drawer {position:absolute;right:22px;top:20px;border:0;background:none;font-size:30px;font-weight:300}.drawer-title {justify-content:space-between;align-items:start;margin:23px 0}.drawer-title h2 {font-size:17px;line-height:1.4;max-width:280px}.drawer-title p {font:11px 'DM Mono',monospace;color:#8e877e;margin-top:8px}.quality-badge {color:var(--yellow);font-size:22px;letter-spacing:-5px;text-shadow:1px 1px #594d42}.snapshot {height:180px;background:#c8ded3;border:1px solid var(--line);display:grid;place-items:center;position:relative;overflow:hidden}.snapshot .building {transform:scale(1.7);margin-top:20px}.snapshot div {position:absolute;bottom:10px;left:12px;color:#786f67}.snapshot small,.snapshot strong,.snapshot em {display:block}.snapshot small {font:7px 'DM Mono',monospace}.snapshot strong {font:9px 'Press Start 2P',monospace;margin-top:5px}.snapshot em {font-size:10px}.property-stats {display:grid;grid-template-columns:1fr 1fr 1fr;padding:20px 0;border-bottom:1px solid var(--line)}.property-stats span {display:block;color:#969087;font:8px 'Press Start 2P',monospace;line-height:1.5}.property-stats b {display:block;font:15px 'DM Mono',monospace;margin-top:8px}.green {color:var(--teal)}.contracts-heading {display:flex;justify-content:space-between;align-items:center;margin:25px 0 15px}.contracts-heading h3 {font-size:10px}.contracts-heading span {font:10px 'DM Mono',monospace;color:var(--orange)}.contract {display:flex;align-items:center;gap:11px;padding:13px 0;border-bottom:1px solid var(--line)}.contract-icon {width:31px;height:31px;display:grid;place-items:center;background:#f1dfc0;color:var(--orange);font-size:20px}.contract-copy {flex:1}.contract-copy strong {font-size:12px}.contract-copy span {display:block;color:#938d83;font:10px 'DM Mono',monospace;margin:5px 0 8px}.contract-copy b,.contract>b {font:11px 'DM Mono',monospace}.contract>b {color:var(--orange)}.progress {height:5px;background:#e1d9cd}.progress i {display:block;height:100%;background:var(--orange)}.primary-button {width:100%;margin-top:28px;padding:16px;background:var(--orange);color:white;border:1px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font:10px 'Press Start 2P',monospace;text-align:left}.primary-button span {float:right;font-size:18px;margin-top:-5px}.drawer-backdrop {position:fixed;inset:0;background:rgba(39,36,41,.35);z-index:4;opacity:0;pointer-events:none;transition:opacity .3s}.drawer-backdrop.open {opacity:1;pointer-events:auto}
@media (max-width: 980px) { .game-layout {grid-template-columns:1fr}.sidebar {border-left:0;border-top:1px solid var(--line)}.player-list {display:grid;grid-template-columns:1fr 1fr}.sidebar-tip {margin-top:20px}.wallet {margin-top:0}.map-column {padding:28px 22px}.topbar {padding:0 22px}.season-status {display:none} }
@media (max-width: 620px) { h1 {font-size:11px}.topbar {height:70px}.map-toolbar {display:block}.turn-clock {margin-top:20px;justify-content:space-between}.advance-button {margin-left:auto}.map-legend {gap:8px;font-size:7px}.map-legend span:last-child {display:none}.city-map {height:390px}.bottom-grid {grid-template-columns:1fr}.player-list {grid-template-columns:1fr}.sidebar {padding:28px 22px}.map-column {padding:25px 15px}.drawer-title h2 {font-size:14px} }
.map-property:before{content:'';position:absolute;left:50%;bottom:14px;width:100px;height:54px;transform:translateX(-50%);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background-color:#7db77f;background-image:linear-gradient(30deg,rgba(236,235,164,.4) 1px,transparent 1px),linear-gradient(150deg,rgba(236,235,164,.35) 1px,transparent 1px),radial-gradient(circle at 24% 38%,#a5ca88 0 2px,transparent 2.5px),radial-gradient(circle at 73% 64%,#a5ca88 0 2px,transparent 2.5px);background-size:18px 18px,18px 18px,29px 23px,37px 31px;border:2px solid #4f9169;z-index:-1}.map-property:after{content:'·  ·';position:absolute;left:50%;bottom:26px;transform:translateX(-50%);color:rgba(48,108,67,.55);font:14px 'DM Mono',monospace;letter-spacing:17px;pointer-events:none}.map-property b{z-index:3}
.map-property:before{background-color:#5fbe68;background-image:linear-gradient(30deg,rgba(231,255,192,.28) 12%,transparent 12.5%,transparent 87%,rgba(231,255,192,.28) 87.5%),linear-gradient(150deg,rgba(231,255,192,.28) 12%,transparent 12.5%,transparent 87%,rgba(231,255,192,.28) 87.5%),linear-gradient(30deg,rgba(35,132,65,.16) 12%,transparent 12.5%,transparent 87%,rgba(35,132,65,.16) 87.5%),linear-gradient(150deg,rgba(35,132,65,.16) 12%,transparent 12.5%,transparent 87%,rgba(35,132,65,.16) 87.5%);background-position:0 0,0 0,18px 31px,18px 31px;background-size:36px 62px;border-color:#3d9951}.map-property:after{display:none}
.city-map{background-color:#60c966;background-image:repeating-linear-gradient(30deg,transparent 0 24px,rgba(20,42,24,.72) 24px 26px,transparent 26px 52px),repeating-linear-gradient(150deg,transparent 0 24px,rgba(20,42,24,.72) 24px 26px,transparent 26px 52px);background-size:90px 52px,90px 52px}.map-property:before{width:108px;height:62px;background-color:#60c966;background-image:repeating-linear-gradient(30deg,transparent 0 24px,rgba(20,42,24,.72) 24px 26px,transparent 26px 52px),repeating-linear-gradient(150deg,transparent 0 24px,rgba(20,42,24,.72) 24px 26px,transparent 26px 52px);background-size:90px 52px,90px 52px;border:2px dashed #162517}.map-property .building{bottom:27px}
.city-map{background:#5b6b58;background-image:none}.world-grid{position:absolute;inset:0;z-index:0;pointer-events:none}.world-tile{position:absolute;width:84px;height:46px;padding:0;border:0;background:transparent;transform:translate(-50%,-50%);pointer-events:auto}.world-tile:before,.world-tile:after{content:'';position:absolute;inset:0;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}.world-tile:before{background:#142619}.world-tile:after{inset:2px;background:#60c966}.world-tile span{position:relative;z-index:1;color:#17341d;font:7px 'DM Mono',monospace;opacity:.72}.world-tile:hover:after{background:#78db6d}.world-tile:focus-visible{outline:2px solid #f5d25a;outline-offset:3px}.road,.river{z-index:1}.map-property:before{display:none}.map-property,.town-hall,.map-compass{z-index:2}