:root { color-scheme: dark; --ink:#172230; --navy:#132031; --navy2:#1c3044; --paper:#e9dfc9; --gold:#e6b95e; --wood:#875333; --line:rgba(255,239,195,.17); }
* { box-sizing: border-box; }
body { margin:0; min-width:960px; background:#0b141d; color:var(--paper); font-family:"Nunito Sans",sans-serif; overflow:hidden; }
button { font:inherit; cursor:pointer; }
.game-shell { height:100vh; }
.hero { position:fixed; inset:0; z-index:4; display:grid; place-items:center; background:#142131 url("assets/port-settlement-title.png") center/cover no-repeat; transition:opacity .7s ease, visibility .7s ease; }
.hero.is-hidden { opacity:0; visibility:hidden; pointer-events:none; }
.hero__shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,21,30,.86),rgba(10,21,30,.3) 65%,rgba(10,21,30,.1)),linear-gradient(0deg,rgba(6,13,20,.7),transparent 55%); }
.hero__content { width:min(700px,76vw); transform:translateX(-19vw); position:relative; text-align:left; text-shadow:0 2px 12px #000; }
.eyebrow { color:#f0c76c; text-transform:uppercase; letter-spacing:.24em; font-weight:800; margin:0 0 10px; font-size:.78rem; }
h1 { font:700 clamp(3.2rem,7vw,6.3rem)/.95 Cinzel,serif; letter-spacing:-.04em; margin:0; color:#fff4d6; }
.hero__content > p:not(.eyebrow):not(.hero__note) { font-size:1.25rem; max-width:470px; line-height:1.5; }
.primary { margin-top:16px; padding:14px 25px; background:linear-gradient(#f4ce77,#b97928); border:1px solid #ffe5a1; box-shadow:0 3px 0 #704018,0 8px 22px #0007; border-radius:5px; color:#25170d; font-weight:900; font-size:1rem; }
.primary:hover { filter:brightness(1.1); transform:translateY(-1px); }
.hero__note { font-size:.75rem; opacity:.72; margin-top:32px; }
.game { min-height:100vh; display:flex; flex-direction:column; background:#142638; }
.topbar { height:76px; flex:none; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:0 23px; border-bottom:1px solid var(--line); background:linear-gradient(100deg,#101d2a,#243e50); box-shadow:0 3px 12px #05090d77; z-index:2; }
.brand { display:grid; grid-template-columns:25px auto; column-gap:7px; align-items:center; min-width:220px; color:#f1cb75; letter-spacing:.08em; }
.brand > span { grid-row:span 2; font-size:1.5rem; }.brand strong { font-family:Cinzel,serif; font-size:.88rem; }.brand small { font-size:.72rem; color:#c7d5d8; letter-spacing:0; margin-top:2px; }
.resources { display:flex; align-items:center; height:100%; }.resources div { min-width:88px; height:45px; padding-left:11px; border-left:1px solid var(--line); display:grid; grid-template-columns:22px auto; grid-template-rows:22px 16px; align-items:center; }.resources span { grid-row:span 2; font-size:1.15rem; filter:saturate(.8); }.resources b { color:#ffedbd; font-size:1rem; }.resources small { color:#a9bbc2; font-size:.66rem; }
.pace { display:flex; gap:4px; }.pace button { min-width:36px; height:31px; border:1px solid #51687a; color:#cdd9d9; background:#1e3446; border-radius:3px; font-size:.75rem; }.pace button.active,.pace button:hover { color:#2c1a0c; background:#ebc66e; border-color:#ffd981; }
.play-area { min-height:0; flex:1; display:grid; grid-template-columns:222px minmax(520px,1fr) 246px; overflow:hidden; }
.panel { position:relative; z-index:1; padding:19px 14px; background:linear-gradient(180deg,#1d3143,#172838); box-shadow:inset 0 0 0 1px #ffffff08; overflow:auto; }.right-panel { border-left:1px solid var(--line); }.left-panel { border-right:1px solid var(--line); }
.panel__heading { display:flex; align-items:center; gap:9px; color:#e8c879; font:700 .75rem Cinzel,serif; text-transform:uppercase; letter-spacing:.08em; }.panel__heading i { height:1px; flex:1; background:var(--line); }.space-top { margin-top:27px; }
.settlement-stat { display:flex; align-items:center; gap:10px; padding:13px 3px 9px; border-bottom:1px solid #ffffff0f; }.settlement-stat > span { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:#30485a; font-size:.9rem; }.settlement-stat b,.settlement-stat small { display:block; }.settlement-stat b { color:#f7edcf; font-size:.85rem; }.settlement-stat small { color:#aab7bd; font-size:.67rem; margin-top:1px; }
.objective { font-size:.79rem; line-height:1.4; margin:12px 2px 8px; color:#d8d7c4; }.objective-bar { height:6px; border-radius:99px; background:#0e1c29; overflow:hidden; box-shadow:inset 0 1px 2px #0008; }.objective-bar span { display:block; height:100%; background:linear-gradient(90deg,#db9c3b,#f4d578); width:46%; transition:width .25s; }.objective-count { margin:5px 2px; font-size:.7rem; color:#aabac0; }.tip { margin-top:28px; padding:12px; border-left:2px solid #d1a355; background:#10202e99; font-size:.72rem; color:#b9c8c9; }.tip b { color:#edcc7e; text-transform:uppercase; font-size:.62rem; letter-spacing:.1em; }.tip p { line-height:1.4; margin:5px 0 0; }
.map-frame { position:relative; overflow:hidden; background:radial-gradient(circle at 50% 30%,#4f9a9b,#1d5a70 55%,#173e54); }.map-frame:before { content:""; position:absolute; inset:0; pointer-events:none; z-index:1; background:linear-gradient(90deg,#0d192155,transparent 15%,transparent 85%,#0d192155),linear-gradient(0deg,#0b172544,transparent 18%); }
canvas { display:block; width:100%; height:100%; cursor:crosshair; image-rendering:auto; }.is-panning { cursor:grabbing; }.map-hint { position:absolute; top:13px; left:50%; transform:translateX(-50%); padding:7px 11px; border:1px solid #ffffff25; border-radius:99px; background:#0e1c2fb8; color:#d7e4dc; font-size:.69rem; white-space:nowrap; pointer-events:none; }.map-hint span { color:#edc465; }.toast { position:absolute; bottom:16px; left:50%; transform:translate(-50%,15px); max-width:390px; padding:9px 14px; border:1px solid #e9c66e66; background:#112233e8; color:#fff0c1; border-radius:4px; font-size:.75rem; text-align:center; opacity:0; transition:.25s; pointer-events:none; }.toast.show { opacity:1; transform:translate(-50%,0); }
.build-list { margin-top:11px; display:grid; gap:7px; }.build-card { width:100%; text-align:left; display:grid; grid-template-columns:40px 1fr; gap:8px; padding:8px; color:#dbe1d5; background:#142535; border:1px solid #ffffff12; border-radius:4px; transition:.15s; }.build-card:hover { background:#294153; border-color:#cda95e88; }.build-card.selected { background:#3d4b42; border-color:#e8c371; box-shadow:inset 3px 0 #edc873; }.build-card.disabled { opacity:.42; }.build-icon { height:38px; display:grid; place-items:center; font-size:1.45rem; border-radius:2px; background:#0e1c28; }.build-card b,.build-card small { display:block; }.build-card b { font-size:.76rem; }.build-card small { margin-top:2px; color:#a7b9ba; font-size:.62rem; }.cost { grid-column:2; color:#dfbe73 !important; }.legend { display:grid; gap:8px; margin:12px 2px; color:#adc0bf; font-size:.69rem; }.legend span { display:flex; align-items:center; gap:6px; }.legend__dot { display:inline-block; width:10px; height:10px; border-radius:50%; }.legend__dot.worker { background:#f4dd9c; }.legend__dot.road { background:#b4865c; }.legend__dot.water { background:#3b91aa; }
.statusbar { height:28px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; background:#0d1925; border-top:1px solid #ffffff14; color:#aabdc1; font-size:.66rem; }.statusbar kbd { padding:1px 4px; border:1px solid #74858b; border-radius:2px; color:#d7e0d5; font-size:.62rem; }
@media (max-width:1100px) { .resources div { min-width:74px; }.play-area { grid-template-columns:200px minmax(480px,1fr) 222px; }.topbar { padding:0 12px; } }