@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  color-scheme: dark;
  --bg: #102327;
  --panel: #193237;
  --line: #365451;
  --text: #f1f4e9;
  --muted: #b1c6bf;
  --gold: #f5be57;
  --mint: #87d6ac;
  --font: 'DM Sans', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { height: 100dvh; background: #829b73; color: var(--text); font: 14px var(--font); }
h1, h2, h3, p { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: 600 13px var(--font); color: inherit; background: #244147; border: 1px solid #45615d; border-radius: 7px; padding: 9px 12px; cursor: pointer; transition: background .15s; }
button:hover:not(:disabled) { background: #3a5955; }
button:disabled { opacity: .42; cursor: not-allowed; }
button:focus-visible, a:focus-visible, [role=button]:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
button.primary, .hire-button { color: #203531; background: var(--gold); border-color: var(--gold); }
button.primary:hover:not(:disabled), .hire-button:hover:not(:disabled) { background: #ffda87; }
[hidden] { display: none !important; }
a { color: var(--gold); }

/* World canvas. There is no document or panel scrolling. */
main, .operation, .world-wrap { position: fixed; inset: 0; }
.world-wrap { background: #829b73; }
#world { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; touch-action: none; cursor: pointer; }
.map-label, .map-legend, .field-heading h1, .field-heading .eyebrow { display: none; }
.topbar { position: fixed; z-index: 3; top: 12px; left: 12px; right: 12px; height: 58px; padding: 8px 14px; display: flex; align-items: center; gap: 16px; background: #142b2fee; border: 1px solid #ffffff24; border-radius: 10px; box-shadow: 0 3px 15px #10232725; }
.brand { display: flex; align-items: center; color: var(--text); text-decoration: none; font: 800 29px 'Barlow Condensed', Impact, sans-serif; letter-spacing: .7px; }
.brand-light { color: var(--gold); }
.brand-mark, .brand small { display: none; }
.stats { display: flex; align-items: center; gap: 18px; flex: 1; min-width: 0; }
.stat { padding: 0 16px; border-left: 1px solid #ffffff18; white-space: nowrap; }
.stat > span { display: block; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .5px; margin-bottom: 3px; }
.stat strong { font-size: 21px; font-variant-numeric: tabular-nums; }
.stat:first-child strong { color: var(--gold); }
.stat em { font-size: 12px; font-style: normal; font-weight: 400; color: var(--muted); }
.icon-button { margin-left: auto; flex-shrink: 0; border-radius: 50%; width: 30px; height: 30px; padding: 0; }
.game-toolbar { position: fixed; z-index: 4; left: 14px; top: 82px; display: flex; gap: 7px; }
.game-toolbar button { padding: 11px 15px; font-size: 14px; background: #183438f0; border-color: #ffffff30; box-shadow: 0 3px 12px #10232725; }
.game-toolbar button[aria-expanded=true] { border-color: var(--gold); color: var(--gold); }
.field-heading { position: absolute; z-index: 2; top: 80px; right: 18px; }
.time-control { display: flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 7px; background: #142b2ef0; }
.time-control > span { color: #d9e5da; font-size: 11px; font-weight: 600; padding: 0 4px; }
.time-control button { min-width: 31px; padding: 5px; }
.camera-controls { position: absolute; z-index: 3; right: 15px; top: 140px; display: flex; flex-direction: column; gap: 5px; }
.camera-controls button { width: 34px; height: 34px; padding: 0; background: #17373df0; font-size: 21px; border-color: #ffffff30; }

/* Selection and next-action controls sit over the lower field. */
.plot-selector { position: absolute; z-index: 2; bottom: 95px; left: 50%; transform: translateX(-50%); width: min(450px, calc(100% - 28px)); height: 32px; display: flex; gap: 5px; }
.plot-selector button { flex: 1; min-width: 0; padding: 5px 3px; font-size: 12px; background: #183438f0; color: #e4ecdf; border-color: #829b7380; }
.plot-selector button.selected { background: var(--gold); color: #203531; border-color: var(--gold); }
.inspector { position: absolute; z-index: 2; bottom: 20px; left: 50%; transform: translateX(-50%); width: min(590px, calc(100% - 28px)); height: 64px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #142b2ff5; border: 1px solid #ffffff30; border-radius: 9px; box-shadow: 0 3px 18px #10232725; }
.plot-number { display: none; }
.inspection-copy { min-width: 0; flex: 1; }
.inspection-copy h3 { font-size: 14px; margin-bottom: 4px; }
.inspection-copy p { font-size: 11px; color: var(--muted); line-height: 1.25; max-height: 28px; overflow: hidden; }
.inspector button { min-width: 130px; font-size: 12px; padding: 10px 7px; }
.progress { height: 4px; background: #496454; border-radius: 3px; overflow: hidden; margin-top: 4px; }
.progress > div { height: 100%; background: var(--gold); }
.mission { position: absolute; z-index: 2; bottom: 20px; left: 14px; width: 220px; min-height: 48px; padding: 7px 10px; display: flex; align-items: center; gap: 8px; background: #223f32f2; border: 1px solid #718469; border-radius: 7px; overflow: hidden; cursor: pointer; }
.mission:hover { border-color: var(--gold); }
.mission-icon, .mission .eyebrow, .mission-copy strong { display: none; }
.mission-copy { flex: 1; min-width: 0; }
.mission-copy p { font-size: 11px; line-height: 1.35; color: #d8e8ce; }
.mission-reward { font-size: 12px; color: var(--gold); white-space: nowrap; }

/* One compact, dismissible management overlay. */
.management { display: none; position: absolute; z-index: 5; top: 134px; left: 14px; width: 300px; height: 350px; max-height: calc(100dvh - 146px); background: #142b2ff8; box-shadow: 0 8px 30px #10232750; border: 1px solid #829b7380; border-radius: 10px; }
.office-open .management { display: flex; flex-direction: column; }
.management-heading { display: none; }
#closeOffice { position: absolute; right: 5px; top: 5px; background: transparent; border: 0; padding: 3px 7px; font-size: 23px; line-height: 1; }
.tabs { display: flex; flex-shrink: 0; padding: 0 33px 0 8px; gap: 4px; border-bottom: 1px solid #ffffff18; }
.tabs button { flex: 1; border: 0; border-bottom: 3px solid transparent; border-radius: 0; padding: 11px 4px; font-size: 13px; background: transparent; color: var(--muted); }
.tabs button.active { color: var(--gold); border-bottom-color: var(--gold); }
#panel { padding: 12px; flex: 1; min-height: 0; }
.choices { display: flex; gap: 3px; margin-bottom: 10px; }
.choices button { flex: 1; min-width: 0; padding: 7px 3px; border: 0; background: transparent; color: var(--muted); font-size: 12px; }
.choices button[aria-pressed=true] { background: #34534f; color: var(--gold); }
.worker-top { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.worker-avatar { width: 34px; height: 38px; background: #2b4747; border-radius: 6px; display: grid; place-items: center; flex-shrink: 0; }
.worker-avatar canvas { width: 30px; height: 34px; image-rendering: pixelated; }
.worker-top h3, .upgrade-card h3 { font-size: 15px; margin-bottom: 3px; }
.worker-top small { color: var(--muted); font-size: 11px; }
.worker-badge { margin-left: auto; font-size: 11px; color: var(--gold); white-space: nowrap; }
.worker-card p, .upgrade-card p { font-size: 12px; color: var(--muted); line-height: 1.4; margin-bottom: 11px; }
.worker-actions { display: flex; gap: 6px; }
.worker-actions button { flex: 1; min-width: 0; padding: 9px 5px; font-size: 12px; }
.upgrade-card button { width: 100%; font-size: 12px; }
.upgrade-card .upgrade-preview { color: var(--gold); font-weight: 700; font-size: 14px; margin: 14px 0; }
.level { float: right; font-size: 11px; color: var(--gold); }
.crew-list, .wage-note, #journal { display: none; }
.crew-status { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 9px; border-top: 1px solid #ffffff20; }
.crew-status > div { min-width: 0; flex: 1; }
.crew-status strong, .crew-status span { display: block; font-size: 11px; }
.crew-status span { color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crew-status button { padding: 2px 7px; font-size: 18px; background: transparent; }
.office-footer { display: flex; justify-content: space-between; gap: 6px; align-items: center; height: 30px; flex-shrink: 0; padding: 6px 10px; border-top: 1px solid #ffffff18; color: var(--muted); font-size: 10px; }
.office-footer button { padding: 0; border: 0; background: none; text-decoration: underline; font-size: 11px; color: var(--muted); }
.advance-button { width: 100%; padding: 6px; font-size: 11px; background: transparent; color: var(--muted); }
#toast { position: fixed; z-index: 8; top: 135px; left: 50%; max-width: calc(100% - 30px); transform: translate(-50%, -5px); opacity: 0; pointer-events: none; padding: 11px 16px; background: var(--gold); color: #173832; border-radius: 8px; font-size: 12px; font-weight: 700; box-shadow: 0 5px 25px #10232735; transition: opacity .2s, transform .2s; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
.office-open #toast { top: auto; bottom: 155px; }

/* Help and reset stay small enough to use over the field. */
dialog { max-width: 480px; width: calc(100% - 28px); max-height: calc(100dvh - 20px); padding: 24px; border: 1px solid #738e7c; border-radius: 12px; background: #193237; color: var(--text); box-shadow: 0 15px 80px #10232780; }
dialog::backdrop { background: #061b2299; backdrop-filter: blur(3px); }
dialog h2 { font: 600 28px 'Barlow Condensed', Impact, sans-serif; margin-bottom: 10px; }
dialog p, dialog li { font-size: 13px; color: #c8dacf; line-height: 1.5; }
dialog ol { padding-left: 20px; margin: 14px 0; }
dialog li { margin: 8px 0; }
.eyebrow { display: block; color: var(--muted); font-size: 10px; letter-spacing: 1px; margin-bottom: 6px; }
.dialog-close:not(.primary) { position: absolute; right: 10px; top: 8px; border: 0; background: none; padding: 0 6px; font-size: 24px; }
.help-note, .source-links { display: none; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.danger { background: #a54e42; }
.help-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 12px 0; color: var(--muted); font-size: 12px; }

@media (max-width: 1100px) {
  .stats { gap: 4px; }
  .stat { padding: 0 9px; }
  .mission { bottom: 139px; width: auto; max-width: 290px; min-height: 30px; padding: 6px 9px; }
}
@media (max-width: 760px) {
  .stat:nth-child(2) { display: none; }
  .stat em { display: none; }
}
@media (max-width: 600px) {
  .topbar { top: 8px; left: 8px; right: 8px; height: 52px; padding: 6px 9px; gap: 6px; }
  .brand { font-size: 22px; }
  .stats { justify-content: space-evenly; gap: 0; }
  .stat { padding: 0 6px; }
  .stat > span { font-size: 8px; }
  .stat strong { font-size: 16px; }
  .icon-button { width: 27px; height: 27px; }
  .game-toolbar { top: 70px; left: 9px; gap: 5px; }
  .game-toolbar button { font-size: 12px; padding: 9px; }
  .field-heading { top: 113px; right: 10px; }
  .time-control { padding: 3px 5px; }
  .time-control button { min-width: 27px; padding: 4px; }
  .management { top: 111px; left: 9px; width: min(300px, calc(100% - 18px)); max-height: calc(100dvh - 123px); }
  .inspector { bottom: 12px; height: 60px; padding: 8px; }
  .inspection-copy h3 { font-size: 12px; }
  .inspection-copy p { font-size: 10px; }
  .inspector button { min-width: 110px; font-size: 11px; }
  .plot-selector { bottom: 82px; }
  .plot-selector button { font-size: 11px; }
  .mission { bottom: 124px; max-width: calc(100% - 28px); }
  #toast { top: 156px; }
  dialog { padding: 20px; }
}
@media (max-height: 540px) and (min-width: 600px) {
  .topbar { top: 7px; height: 45px; }
  .game-toolbar { top: 61px; }
  .field-heading { top: 60px; }
  .management { top: 106px; width: 330px; height: calc(100dvh - 116px); max-height: none; }
  #panel { padding: 7px 10px; }
  .tabs button { padding: 7px 4px; }
  .choices { margin-bottom: 5px; }
  .choices button { padding: 5px; }
  .worker-top { margin-bottom: 4px; }
  .worker-card p { font-size: 11px; margin-bottom: 6px; }
  .worker-actions button { padding: 7px 5px; }
  .crew-status { margin-top: 5px; padding-top: 5px; }
  .office-footer { height: 25px; padding: 5px 8px; }
  .advance-button { padding: 4px; }
  .inspector { bottom: 10px; height: 53px; }
  .plot-selector { bottom: 72px; }
  .mission { bottom: 113px; }
  #toast { top: 108px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Open-field building palette: every control stays over the game. */
.build-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.build-grid button{min-height:52px;display:flex;flex-direction:column;justify-content:center;gap:5px;background:#294a48;color:#f3e8bd;border:1px solid #557068;border-radius:7px}.build-grid span{color:#f5be57;font-size:12px}.build-note{font-size:12px;line-height:1.45;color:#aec5b5}.game-toolbar{gap:5px}.game-toolbar button{padding:10px 12px}.inspector>button{flex-shrink:0}.inspector #cancelBuild{background:transparent;color:#d6dfbd;border:0;padding:8px}#world{touch-action:none;cursor:grab}#world:active{cursor:grabbing}
@media(max-width:600px){.game-toolbar button{padding:9px 8px;font-size:12px}.inspector .inspection-copy p{font-size:10px}.inspector .inspection-copy h3{font-size:12px}.inspector>button{font-size:11px;padding:9px}.build-grid{gap:6px}.build-grid button{min-height:46px}}
@media(max-height:540px) and (min-width:600px){.build-grid{grid-template-columns:repeat(3,1fr);margin:5px 0;gap:5px}.build-grid button{min-height:42px;font-size:11px}.build-note{font-size:10px;margin:5px 0}}

#panel:has(.build-grid)>h3{margin:6px 0;font-size:16px}.build-grid{margin:8px 0;gap:6px}.build-grid button{min-height:42px;gap:3px}.build-note{font-size:11px;margin:8px 0;line-height:1.35}

.build-grid{grid-template-columns:repeat(3,1fr);gap:5px}.build-grid button{min-height:42px;font-size:11px;padding:5px}.build-grid span{font-size:10px}.build-note{font-size:10px}.build-grid strong{font-weight:600}
.office-title{height:42px;display:flex;align-items:center;padding:10px 42px 8px 12px;border-bottom:1px solid #ffffff18;flex-shrink:0}.office-title h2{font-size:15px;font-weight:600}#panel:has(.build-grid)>h3{display:none}.inspector:has(#tilePan) button{min-width:0;padding:9px 10px}.inspector:has(#tilePan) #undoTile{font-size:20px;padding:4px 9px}.inspector:has(#tilePan) .inspection-copy{min-width:90px}.inspector:has(#tilePan) h3{font-size:12px}#tilePan[aria-pressed=true]{border-color:#f5be57;color:#f5be57}@media(max-width:600px){.inspector:has(#tilePan){gap:4px}.inspector:has(#tilePan) button{font-size:10px;padding:8px}.inspector:has(#tilePan) .inspection-copy p{font-size:9px}}

/* Trading stays on the field; its policy is visible while oil accumulates. */
#marketButton{color:#f5d18b}#marketButton[data-policy=hold],#marketButton[data-policy=premium]{border-color:#f5be57;background:#3d4d3d}
@media(max-width:600px){.game-toolbar{right:9px;gap:4px}.game-toolbar button{padding:8px 6px;font-size:11px;white-space:nowrap}.game-toolbar #marketButton{flex:1;font-size:10px;min-width:0;white-space:normal}}

.camera-controls .layer-toggle{font-size:10px;font-weight:700}
.camera-controls .layer-toggle[aria-pressed=true]{color:#183a35;background:#f5be57;border-color:#f5be57}
#layerHint{position:fixed;z-index:2;left:14px;top:136px;max-width:calc(100% - 80px);padding:7px 10px;background:#16372fee;border:1px solid #b8caa4;border-radius:6px;color:#e5efd2;font-size:11px;pointer-events:none}
.inspector:has(#scoutBuild){height:82px}.inspector:has(#scoutBuild) button{min-width:80px}.inspector:has(#scoutBuild) p{max-height:42px}
@media(max-width:600px){#layerHint{top:112px;max-width:calc(100% - 220px);font-size:9px;padding:5px}.camera-controls{top:159px}.inspector:has(#scoutBuild){height:92px;gap:5px}.inspector:has(#scoutBuild) button{min-width:65px;font-size:10px;padding:8px 4px}.inspector:has(#scoutBuild) p{font-size:9px;max-height:50px}}
@media(max-height:540px) and (min-width:600px){.camera-controls{top:104px;gap:3px}.camera-controls button{width:28px;height:28px}#layerHint{top:100px;font-size:10px}.inspector:has(#scoutBuild){height:65px}}

.inspector:has(#productionAction:not([hidden])) button{min-width:85px;padding:10px 7px}
@media(max-width:600px){.inspector:has(#productionAction:not([hidden])){height:78px;gap:5px}.inspector:has(#productionAction:not([hidden])) button{min-width:62px;font-size:10px;padding:8px 5px}.inspector:has(#productionAction:not([hidden])) .inspection-copy p{max-height:42px}}

.build-categories{display:flex;gap:5px;margin-bottom:6px}.build-categories button{flex:1;padding:7px;font-size:12px}.build-categories button[aria-pressed=true]{background:#eac273;color:#173c35;border-color:#eac273}#compareInvestments{width:100%;padding:8px;font-size:12px}#fieldDialog .field-dialog-grid{gap:5px}#fieldDialog .field-dialog-grid button{padding:8px}
@media(max-height:540px) and (min-width:600px){.build-categories{margin:0;gap:4px}.build-categories button{padding:4px;font-size:11px}#panel:has(.build-grid){padding:7px 10px}.build-note{margin:5px 0}#fieldTools,#compareInvestments{padding:5px;font-size:11px}#fieldDialog .field-dialog-grid{grid-template-columns:repeat(3,1fr)}}

@media(max-height:540px) and (min-width:600px){.build-grid button{min-height:33px;padding:3px;gap:1px}.build-grid{gap:4px;margin:5px 0}.build-categories button{padding:3px}.build-note{line-height:1.2}}

#tankSalesDialog { width:min(470px,calc(100vw - 24px)); padding:24px; }
.tank-sales-layout { display:flex; align-items:center; gap:24px; margin:24px 0 12px; }
.tank-sales-vessel { position:relative; flex:0 0 104px; height:160px; border:4px solid #a5bba8; border-radius:24px / 12px; background:#102c30; }
#tankSalesFill { position:absolute; bottom:0; width:100%; border-radius:18px / 8px; opacity:.9; }
#tankSalesLine { position:absolute; left:-8px; right:-8px; border-top:3px dashed #ffda80; }
#tankSalesLine span { position:absolute; top:-17px; left:8px; font-size:9px; font-weight:bold; color:#ffda80; white-space:nowrap; }
.tank-sales-settings { flex:1; min-width:0; font-size:13px; }
#tankSalesSlider { width:100%; accent-color:#f4bd57; margin:18px 0 4px; cursor:pointer; }
.tank-sales-note { font-size:12px; color:#b6ccbf; line-height:1.45; }
#tankSalesDone { width:100%; }
@media(max-height:460px){ #tankSalesDialog { padding:16px; } .tank-sales-layout { margin:16px 0 6px; } .tank-sales-vessel { height:100px; } #tankSalesDialog h2 { margin:0; } }