182 lines
11 KiB
CSS
182 lines
11 KiB
CSS
:root {
|
|
--bg: #f2fff0;
|
|
--screen: #eefbea;
|
|
--panel: rgba(245, 255, 242, 0.96);
|
|
--ink: #102015;
|
|
--muted: #526456;
|
|
--line: #102015;
|
|
--green: #22b94f;
|
|
--green-soft: #b7f5c6;
|
|
--white: #ffffff;
|
|
--danger: #c42424;
|
|
--shadow: 8px 8px 0 rgba(16, 32, 21, 0.22);
|
|
}
|
|
* { box-sizing: border-box; }
|
|
html, body { min-height: 100%; }
|
|
body { margin: 0; background: var(--bg); color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; overflow-x: hidden; }
|
|
button { font: inherit; }
|
|
h1, h2, p { margin: 0; }
|
|
#app { width: min(100vw, 1680px); margin: 0 auto; padding: 0 8px 12px; }
|
|
.game-shell { position: relative; width: 100%; min-height: min(100vh, 920px); border: 4px solid var(--line); border-top: 0; background: var(--screen); overflow: hidden; box-shadow: var(--shadow); }
|
|
#gameCanvas { display: block; width: 100%; height: min(calc(100vh - 10px), 900px); min-height: 720px; background: var(--screen); touch-action: none; }
|
|
.hud { position: absolute; z-index: 4; display: grid; gap: 6px; pointer-events: none; }
|
|
.hud-top-left { top: 10px; left: 10px; grid-template-columns: repeat(5, minmax(86px, auto)); }
|
|
.hud-top-right { top: 10px; right: 10px; grid-template-columns: repeat(4, minmax(78px, auto)); }
|
|
.hud-card { min-width: 82px; padding: 7px 9px; border: 3px solid var(--line); background: rgba(255,255,255,.88); box-shadow: 4px 4px 0 rgba(16,32,21,.16); }
|
|
.hud-card.primary { min-width: 116px; padding: 10px 12px; background: rgba(255,255,255,.96); }
|
|
.hud-card.primary span { font-size: 10px; }
|
|
.hud-card.primary strong { font-size: clamp(22px, 2vw, 32px); }
|
|
.hud-card.time-critical { background: #fff0d1; box-shadow: inset 0 0 0 4px var(--danger), 4px 4px 0 rgba(16,32,21,.16); }
|
|
.hud-card span { display: block; font-size: 9px; letter-spacing: .1em; color: var(--muted); margin-bottom: 4px; }
|
|
.hud-card strong { font-size: clamp(15px, 1.3vw, 22px); line-height: 1; color: var(--ink); }
|
|
.hud-card.cash strong, .hud-card.profit strong, .cash-positive { color: var(--green) !important; }
|
|
.cash-negative { color: var(--danger) !important; }
|
|
|
|
.priority-strip { position: absolute; z-index: 5; top: 76px; left: 10px; display: grid; grid-template-columns: minmax(280px, 1.2fr) minmax(170px, .75fr) minmax(130px, .55fr); gap: 8px; max-width: calc(100% - 420px); pointer-events: none; }
|
|
.priority-strip > div { border: 3px solid var(--line); background: rgba(255,255,255,.94); padding: 8px 10px; font-weight: 900; text-transform: uppercase; box-shadow: 4px 4px 0 rgba(16,32,21,.14); font-size: 12px; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.event-brief.active { background: #fff0d1; box-shadow: inset 0 0 0 3px var(--danger), 4px 4px 0 rgba(16,32,21,.14); }
|
|
.event-brief.next { background: var(--green-soft); box-shadow: inset 0 0 0 3px var(--green), 4px 4px 0 rgba(16,32,21,.14); }
|
|
.event-brief.locked { background: #edf3ec; color: var(--muted); }
|
|
.target-brief { color: var(--green); }
|
|
.speed-brief { color: var(--ink); }
|
|
|
|
.build-panel { position: absolute; z-index: 6; top: 118px; right: 12px; bottom: 12px; width: clamp(278px, 23vw, 360px); min-height: 0; padding: 10px; border: 4px solid var(--line); background: var(--panel); box-shadow: var(--shadow); overflow: auto; }
|
|
.panel-head { display: grid; gap: 8px; margin-bottom: 10px; }
|
|
.panel-head h1 { font-size: 15px; letter-spacing: .06em; }
|
|
.panel-head h1 span { font-size: 10px; color: var(--white); background: var(--green); border: 2px solid var(--line); padding: 1px 6px; }
|
|
.panel-head p { color: var(--muted); margin-top: 4px; font-size: 10px; line-height: 1.25; }
|
|
.panel-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
|
|
.build-panel h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 7px; }
|
|
.large-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
|
|
.history-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; grid-column: 1 / -1; }
|
|
.tool-button.small { min-height: 40px; padding: 6px; }
|
|
.tool-button, .primary-button, .sort-button, .facility-action { border: 3px solid var(--line); background: var(--white); color: var(--ink); font-weight: 900; text-transform: uppercase; cursor: pointer; box-shadow: 4px 4px 0 rgba(16,32,21,.18); }
|
|
.tool-button { min-height: 50px; text-align: left; padding: 8px; }
|
|
.tool-button strong { display: block; font-size: 12px; }
|
|
.tool-button span { display: block; margin-top: 4px; font-size: 9px; color: var(--muted); }
|
|
.tool-button.active { background: var(--green-soft); box-shadow: inset 0 0 0 3px var(--green), 4px 4px 0 rgba(16,32,21,.18); }
|
|
.tool-button.danger.active { background: #ffdada; box-shadow: inset 0 0 0 3px var(--danger), 4px 4px 0 rgba(16,32,21,.18); }
|
|
.primary-button { padding: 10px 12px; background: var(--green); color: var(--white); white-space: nowrap; }
|
|
.primary-button:disabled, .tool-button:disabled, .sort-button:disabled, .facility-action:disabled { opacity: .42; cursor: not-allowed; }
|
|
.mini-box, .facility-panel-empty, .facility-card { border: 3px solid var(--line); background: var(--white); padding: 12px; line-height: 1.45; color: var(--muted); font-size: 11px; }
|
|
.facility-card h3 { color: var(--ink); font-size: 14px; margin: 0 0 6px; }
|
|
.facility-card p { margin: 4px 0; }
|
|
.facility-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
|
|
.facility-action { padding: 7px 9px; font-size: 10px; }
|
|
.facility-action.good { background: var(--green-soft); }
|
|
.facility-action.warn { background: #fff0d1; }
|
|
.facility-action.danger { background: #ffdada; }
|
|
.control-dock { position: absolute; z-index: 7; left: 50%; bottom: 12px; transform: translateX(-50%); display: grid; grid-template-columns: repeat(4, 150px); gap: 8px; padding: 7px; border: 3px solid var(--line); background: rgba(255,255,255,.90); }
|
|
.sort-button { min-height: 46px; font-size: 12px; }
|
|
.modal { position: fixed; inset: 0; z-index: 20; display: none; align-items: center; justify-content: center; padding: 22px; background: rgba(16,32,21,.45); }
|
|
.modal.visible { display: flex; }
|
|
.modal-card { width: min(860px, 96vw); border: 4px solid var(--line); padding: 24px; background: var(--white); box-shadow: var(--shadow); }
|
|
.modal-card h2 { font-size: 26px; text-transform: uppercase; margin-bottom: 12px; }
|
|
.modal-card p { line-height: 1.55; }
|
|
.modal-card ul { margin: 12px 0 0; padding-left: 22px; line-height: 1.55; color: var(--muted); }
|
|
.modal-actions { margin-top: 18px; display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
|
|
.route-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
|
|
.route-card { border: 3px solid var(--line); background: #f7fff5; padding: 14px; display: grid; grid-template-columns: 44px 1fr 28px 1fr; align-items: center; gap: 4px 8px; }
|
|
.route-card .route-icon { grid-row: 1 / span 2; font-size: 30px; text-align: center; }
|
|
.route-card strong, .route-card em { font-style: normal; font-weight: 900; text-transform: uppercase; }
|
|
.route-card b { font-size: 24px; color: var(--green); text-align: center; }
|
|
.route-card small { grid-column: 2 / span 3; color: var(--muted); font-weight: 900; }
|
|
.result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
|
|
.result-grid div { border: 3px solid var(--line); padding: 10px; background: #f7fff5; }
|
|
.result-grid strong { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; margin-bottom: 6px; }
|
|
.result-grid span { font-size: 16px; font-weight: 900; color: var(--ink); }
|
|
.game-shell:not(.phase-build) .build-panel { display: none; }
|
|
.game-shell.phase-running .hud-top-right { display: none; }
|
|
.game-shell:not(.phase-running) .control-dock { display: none; }
|
|
@media (max-width: 1180px) {
|
|
#app { padding: 0; }
|
|
.game-shell { min-height: 100vh; }
|
|
#gameCanvas { height: 100vh; }
|
|
.hud-top-left, .hud-top-right { grid-template-columns: repeat(2, minmax(76px, auto)); }
|
|
.priority-strip { top: 150px; left: 8px; right: 8px; max-width: none; grid-template-columns: 1fr; }
|
|
.build-panel { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 42vh; }
|
|
.large-tools { grid-template-columns: 1fr 1fr; }
|
|
.control-dock { grid-template-columns: repeat(2, 150px); }
|
|
.route-cards, .result-grid { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
.contract-card { border: 3px solid var(--line); background: #f7fff5; padding: 12px; line-height: 1.35; color: var(--ink); font-size: 11px; box-shadow: 4px 4px 0 rgba(16,32,21,.14); }
|
|
.contract-card.empty { color: var(--muted); background: rgba(255,255,255,.72); }
|
|
.contract-card.empty strong { display: block; color: var(--ink); margin-bottom: 4px; }
|
|
.contract-card h3 { margin: 2px 0 7px; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }
|
|
.contract-card p { margin: 5px 0; }
|
|
.contract-card.accepted { background: var(--green-soft); box-shadow: inset 0 0 0 3px var(--green), 4px 4px 0 rgba(16,32,21,.14); }
|
|
.contract-card.declined { background: #f1f1f1; color: var(--muted); }
|
|
.contract-status { display: inline-block; padding: 2px 7px; border: 2px solid var(--line); background: var(--white); font-size: 9px; font-weight: 900; letter-spacing: .1em; margin-bottom: 4px; }
|
|
.contract-metrics { display: grid; grid-template-columns: 1fr; gap: 4px; margin: 8px 0; }
|
|
.contract-metrics span { display: block; border: 2px solid rgba(16,32,21,.55); background: rgba(255,255,255,.82); padding: 5px; font-weight: 900; color: var(--ink); }
|
|
.contract-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
|
|
.result-section-title { margin: 16px 0 8px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; color: var(--green); }
|
|
.result-section-title:first-child { margin-top: 0; }
|
|
.muted-title { color: var(--muted); border: 3px solid var(--line); padding: 10px; background: #f7fff5; }
|
|
|
|
.compact-rules .mini-box { padding: 8px; font-size: 10px; }
|
|
.primary-button:disabled { filter: grayscale(1); background: #c9d2ca; color: #526456; }
|
|
.formula-box {
|
|
border: 3px solid var(--line);
|
|
background: #f7fff5;
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
line-height: 1.5;
|
|
color: var(--ink);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
.equipment-menu-lines {
|
|
border: 3px solid var(--line);
|
|
background: #ffffff;
|
|
padding: 10px;
|
|
margin: 8px 0;
|
|
color: var(--muted);
|
|
line-height: 1.45;
|
|
}
|
|
.equipment-menu-lines p { margin: 4px 0; }
|
|
|
|
/* v11 compact clicked-equipment bubble */
|
|
.modal.equipment-popover {
|
|
background: transparent;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
padding: 0;
|
|
pointer-events: none;
|
|
}
|
|
.modal.equipment-popover .modal-card {
|
|
position: absolute;
|
|
left: var(--popover-x, 16px);
|
|
top: var(--popover-y, 16px);
|
|
width: min(320px, calc(100vw - 24px));
|
|
max-height: min(360px, calc(100vh - 24px));
|
|
overflow: auto;
|
|
padding: 10px;
|
|
border-width: 3px;
|
|
pointer-events: auto;
|
|
box-shadow: 6px 6px 0 rgba(16,32,21,.18);
|
|
}
|
|
.modal.equipment-popover .modal-card h2 {
|
|
font-size: 14px;
|
|
margin-bottom: 6px;
|
|
}
|
|
.modal.equipment-popover .modal-actions {
|
|
margin-top: 8px;
|
|
gap: 6px;
|
|
justify-content: flex-start;
|
|
}
|
|
.modal.equipment-popover .modal-actions button {
|
|
padding: 7px 9px;
|
|
font-size: 10px;
|
|
}
|
|
.equipment-menu-lines.compact {
|
|
padding: 7px;
|
|
margin: 6px 0;
|
|
font-size: 10px;
|
|
}
|
|
.formula-box.compact {
|
|
padding: 7px;
|
|
margin: 6px 0;
|
|
font-size: 10px;
|
|
}
|