.cs{--ink:#16476a;--muted:#486e87;--line:#b5d5e8;--green:#0875ac;--cream:#f7fcff;max-width:1280px;margin:30px auto;padding:0 18px 30px;color:var(--ink);font-family:Nunito,"Segoe UI",sans-serif}.cs *{box-sizing:border-box}.cs [hidden]{display:none!important}.cs h1{font-size:clamp(2.8rem,5vw,4.5rem);line-height:1.05;letter-spacing:-.04em;color:#0875ac;margin:12px 0}.cs h2{font-size:1.3rem;line-height:1.35;margin:6px 0 13px}.cs h3{font-size:1rem;margin:16px 0 10px}.cs p{line-height:1.65}.cs-heading{padding:30px 34px;background:linear-gradient(125deg,#ffffff,#dcefff);border:1px solid white;border-radius:24px 24px 0 0;display:flex;align-items:center;justify-content:space-between;gap:30px}.cs-heading>div{max-width:790px}.cs-heading p:last-child{margin-bottom:0;color:var(--muted)}.cs-kicker{font-size:.66rem;font-weight:900;letter-spacing:.16em;color:#36779b;margin:0}.cs-tag{background:#0875ac;color:white;border-radius:999px;padding:10px 15px;font-weight:900;font-size:.7rem;white-space:nowrap}.cs button,.cs input,.cs select{font:inherit}.cs button{border:1px solid #70b4d8;background:#1686b5;color:white;border-radius:8px;font-size:.82rem;font-weight:800;line-height:1.4;padding:10px 14px;cursor:pointer}.cs button:hover:not(:disabled){background:#075d91}.cs button:disabled{opacity:.42;cursor:default}.cs label{display:block;font-size:.78rem;font-weight:800}.cs input,.cs select{display:block;width:100%;min-width:0;padding:9px;border:1px solid #9fc7df;background:#fcfeff;color:var(--ink);border-radius:7px;margin-top:5px}.cs a{color:#086591;font-weight:800}.cs :focus-visible{outline:3px solid #0875ac;outline-offset:3px}.cs-connection{display:grid;grid-template-columns:1fr 1fr;gap:20px 30px;background:var(--cream);padding:25px 32px;border:1px solid var(--line)}.cs-fields{display:flex;gap:12px}.cs-fields>label{flex:1;min-width:0}.cs-connection button{margin-top:15px}.cs-connection #room-code{text-transform:uppercase;letter-spacing:.08em;font-family:monospace}.cs-connection p,.cs-connection>a{grid-column:1/-1;margin:0;font-size:.82rem}.cs-room{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:13px 22px;background:#086591;color:white;font-size:.78rem}.cs-room strong{font-family:monospace;color:#effbff;letter-spacing:.06em}#leave{margin-left:auto}.cs-room button{font-size:.72rem;padding:7px 10px;background:#147daf;border-color:#90c9e8}.cs-status{margin:0!important;padding:13px 22px;background:#e8f6ff;min-height:48px;font-size:.85rem;border-inline:1px solid var(--line)}.cs-world{display:grid;grid-template-columns:1.2fr repeat(4,1fr);gap:14px;padding:20px 24px;background:#f7fcff;border:1px solid var(--line)}.cs small{font-size:.65rem;font-weight:800;letter-spacing:.04em;color:var(--muted)}.cs-world strong,.cs-citybar strong{display:block;margin-top:6px;font-size:.98rem}.cs-citybar{display:grid;grid-template-columns:1.5fr repeat(7,1fr) auto;gap:12px;padding:18px 22px;background:#d9efff;border:1px solid var(--line);border-top:0;align-items:center}.cs-citybar small{font-size:.58rem}.cs-citybar strong{font-size:.85rem}#actions{color:#846226}.cs-tabs{display:flex;gap:7px;padding:14px 18px;background:#edf8ff;border:1px solid var(--line);border-top:0;flex-wrap:wrap}.cs-tabs button{background:transparent;color:var(--ink);border-color:#a6cce3}.cs-tabs button[aria-pressed=true]{background:#1686b5;color:white;border-color:#1686b5}.cs-panel{border:1px solid var(--line);border-top:0;background:#f7fcff}.cs-map-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px}.cs-map-card{background:#dcefff;min-width:0}.cs-map-heading{padding:20px 24px 0}.cs-map-heading h2{margin-bottom:3px}.cs-map-heading p{font-size:.8rem;color:var(--muted);margin-top:0}#island{display:block;width:100%;aspect-ratio:1050/680;cursor:pointer;outline-offset:-3px}.cs-legend{display:flex;gap:13px;flex-wrap:wrap;padding:0 24px;font-size:.72rem;font-weight:800}.cs-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px}.cs-small{font-size:.76rem;color:var(--muted);line-height:1.6}.cs-map-note{padding:0 24px 15px}.cs-inspector{padding:22px;background:#f4fbff;border-left:1px solid var(--line)}#tile-info{font-size:.85rem;min-height:45px}.cs-inspector>button{width:100%;margin-top:13px}.cs-inspector>.cs-fields{margin:16px 0}.cs-contest{border-top:1px solid var(--line);margin-top:20px;padding-top:4px}.cs-contest button{background:#8e5a45;border-color:#8e5a45;width:100%}.cs-economy,.cs-two{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}.cs-economy>section,.cs-card{padding:25px;background:#f7fcff}.cs-economy p{font-size:.85rem}.cs-economy button{margin-top:10px}.cs-gather{display:flex;gap:7px;flex-wrap:wrap}.cs-gather button{font-size:.74rem;padding:9px 12px}.cs-forecast{display:flex;gap:10px;flex-wrap:wrap}.cs-forecast span{display:block;background:#e4f3ff;border-radius:7px;padding:9px 11px;font-size:.8rem}.cs-warning{color:#a04f36!important;font-weight:800}.cs-trade-fields{display:grid;grid-template-columns:2fr 1fr 2fr 1fr;gap:10px;margin:20px 0}.cs-offer,.cs-neighbor{border:1px solid var(--line);border-radius:10px;padding:16px;margin-top:12px;background:#eff8ff}.cs-offer p,.cs-neighbor p{font-size:.82rem;margin:5px 0 10px}.cs-offer strong,.cs-neighbor strong{font-size:.9rem}.cs-offer button,.cs-neighbor button{font-size:.74rem;padding:8px 10px;margin:4px 5px 0 0}.cs-project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}.cs-project{border:1px solid #a9cfe5;border-radius:15px;padding:22px;background:linear-gradient(#f8fdff,#dfefff);min-width:0}.cs-project h3{margin-top:0}.cs-project p{font-size:.83rem}.cs-project select{font-size:.8rem}.cs-progress{height:7px;border-radius:99px;overflow:hidden;background:#c7e2f3;margin:14px 0}.cs-progress i{display:block;height:100%;background:#1686b5}.cs-project .cs-fields{margin:15px 0}.cs-project button{width:100%}.cs-goals{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}.cs-goals>div{background:#ebf7ff;border:1px solid #b4d6eb;border-radius:10px;padding:16px;font-size:.83rem}.cs-goals strong{display:block;margin-bottom:5px}.cs-goal-met{background:#d9efff!important;border-color:#66b4dc!important}#history-chart{display:block;width:100%;aspect-ratio:1000/280;background:#f3faff;border:1px solid #b5d5e8;border-radius:10px;margin-top:20px}.cs-eco-key{color:#318460;font-weight:800}.cs-trust-key{color:#3988ad;font-weight:800}.cs-well-key{color:#b5823f;font-weight:800}.cs-table-wrap{overflow:auto;margin:22px 0}.cs table{border-collapse:collapse;width:100%;min-width:700px;font-size:.8rem;text-align:left}.cs th,.cs td{padding:12px;border-bottom:1px solid var(--line)}.cs th{font-size:.7rem;color:var(--muted);background:#e7f4ff}.cs tbody tr:first-child{font-weight:800}.cs details{font-size:.8rem;margin-top:15px}.cs summary{cursor:pointer;font-weight:800}#city-result{font-size:.85rem;line-height:1.7;padding:18px;background:#e4f3ff;border-radius:10px}#timeline{max-height:340px;overflow:auto;padding-left:24px}#timeline li{font-size:.8rem;line-height:1.6;padding:8px 0;border-bottom:1px solid #c9dfed}.cs-rules{padding:25px;background:#e8f6ff;border:1px solid var(--line);border-top:0;border-radius:0 0 20px 20px}.cs-rules p{font-size:.82rem}.cs-card+.cs-card{border-top:1px solid var(--line)}@media(max-width:1050px){.cs-citybar{grid-template-columns:repeat(5,1fr)}.cs-citybar button{grid-column:auto}.cs-project-grid{grid-template-columns:1fr}.cs-map-layout{grid-template-columns:minmax(0,1fr) 250px}.cs-inspector{padding:18px}}@media(max-width:720px){.cs{padding:0 9px 24px;margin-top:20px}.cs-heading{display:block;padding:25px}.cs-heading h1{font-size:2.8rem}.cs-tag{display:inline-block;margin-top:18px}.cs-heading p:last-child{font-size:.9rem}.cs-connection{grid-template-columns:1fr;padding:22px}.cs-world{grid-template-columns:repeat(3,1fr);padding:17px;gap:16px}.cs-world strong{font-size:.85rem}.cs-citybar{grid-template-columns:repeat(3,1fr);padding:17px}.cs-tabs{gap:6px;padding:12px}.cs-tabs button{font-size:.72rem;padding:9px}.cs-map-layout{grid-template-columns:1fr}.cs-inspector{border-left:0;border-top:1px solid var(--line);padding:22px}.cs-map-heading{padding:18px 20px 0}.cs-economy,.cs-two{grid-template-columns:1fr}.cs-card,.cs-economy>section{padding:22px}.cs-project-grid{grid-template-columns:1fr}.cs-goals{grid-template-columns:1fr}.cs-trade-fields{grid-template-columns:1.5fr 1fr}.cs-legend{padding:0 18px;gap:10px;font-size:.65rem}.cs-room{gap:7px;padding:12px;font-size:.68rem}.cs-room button{font-size:.65rem}.cs-rules{padding:22px}.cs-fields{gap:8px}}

/* Match the shared game page title and white/blue Aero glass surfaces. */
.cs{box-sizing:border-box;max-width:1100px;width:100%;}
.cs-heading{display:flex;flex-direction:column;justify-content:center;text-align:center;gap:16px;padding:0 20px 26px;background:transparent;border:0;border-radius:0;}
.cs-heading>div{max-width:820px;margin-inline:auto;}
.cs-heading h1{font-size:clamp(2rem,4vw,2.8rem);line-height:1.2;font-weight:800;letter-spacing:normal;color:#0875ac;margin:0 0 12px;}
.cs-heading p:last-child{font-size:1.1rem;line-height:1.7;margin:0;color:#16476a;}
.cs-tag{display:inline-flex;align-items:center;justify-content:center;margin:0;padding:8px 15px;border:1px solid white;background:linear-gradient(#faffff,#d9efff);color:#086591;box-shadow:inset 0 1px white,0 3px 10px #176b9820;}
.cs-connection{border-radius:26px 26px 0 0;border-color:white;}
.cs-connection,.cs-panel,.cs-card,.cs-economy>section,.cs-world,.cs-rules{background:linear-gradient(135deg,#ffffffed,#e7f9ffda);box-shadow:inset 0 1px white,0 8px 24px #1d779f12;}
.cs-citybar,.cs-tabs,.cs-status{background:linear-gradient(135deg,#f9fdffeb,#dcefffdb);}
.cs-map-card{background:linear-gradient(145deg,#f5fcff,#d1edff);}
.cs-inspector{background:linear-gradient(145deg,#ffffffed,#e5f5ffdb);}
.cs button{border-radius:999px;border:1px solid #8ac5e4;background:linear-gradient(#a8e4f7,#68bfdf 48%,#208fbc 51%,#0c75a9);color:white;box-shadow:inset 0 1px #ffffffcc,0 3px 8px #12658d25;text-shadow:0 1px 1px #07538066;}
.cs button:hover:not(:disabled){background:linear-gradient(#b8edfc,#76ccea 48%,#269dcb 51%,#1183b7);filter:brightness(1.04);}
.cs button:disabled{opacity:.45;box-shadow:none;}
.cs input,.cs select{border-radius:12px;background:linear-gradient(#f5fbff,#ffffff);border-color:#9fc7df;box-shadow:inset 0 2px 4px #236c9710;}
.cs-tabs button{background:linear-gradient(#ffffff,#e5f4ff);color:#17618d;text-shadow:0 1px white;border-color:#aacfe5;}
.cs-tabs button[aria-pressed=true]{background:linear-gradient(#66c7e8,#1283b7);color:white;border-color:#76badb;text-shadow:0 1px 1px #07538066;}
.cs-room{background:linear-gradient(#1289ba,#075d91);}
.cs-room button{background:linear-gradient(#a8e4f7,#1686b5);border-color:#a5ddf5;}
.cs-project{background:linear-gradient(145deg,#ffffffed,#dfefffdb);border-color:#b2d5eb;box-shadow:inset 0 1px white,0 5px 16px #1b729516;}
.cs-offer,.cs-neighbor,.cs-goals>div{background:linear-gradient(#ffffffec,#e8f6ffdd);border-color:#b4d6eb;box-shadow:inset 0 1px white;}
.cs-rules{border-radius:0 0 26px 26px;}
@media(max-width:720px){.cs-heading{padding:0 12px 24px;gap:14px}.cs-heading h1{font-size:clamp(2rem,7vw,2.8rem)}.cs-heading p:last-child{font-size:1rem}.cs-tag{margin:0}.cs-connection{border-radius:22px 22px 0 0}}