html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #111;
color: white;
font-family:
Arial,
Helvetica,
sans-serif;
}
button {
font-family:
inherit;
}
#gameCanvas {
display: block;
width: 100vw;
height: 100vh;
background: #000;
cursor: grab;
}
#gameCanvas.dragging {
cursor: grabbing;
}
.hidden {
display: none !important;
}
/* ============================================================
HAUPTMENÜ
============================================================ */
.main-menu-screen {
position: fixed;
inset: 0;
z-index: 50000;
display: flex;
justify-content: center;
align-items: flex-end;
padding-bottom: 105px;
box-sizing: border-box;
background-image:
linear-gradient(
rgba(0,0,0,0.04),
rgba(0,0,0,0.16)
),
url("hauptmenue.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.main-menu-buttons {
width: 420px;
max-width:
calc(100vw - 40px);
display: flex;
flex-direction: column;
gap: 13px;
}
.main-menu-button {
width: 100%;
padding:
16px
24px;
border:
2px solid
rgba(255,255,255,0.82);
border-radius:
9px;
background:
rgba(15,15,15,0.90);
color: white;
font-size:
20px;
font-weight:
700;
cursor:
pointer;
box-shadow:
0
7px
20px
rgba(0,0,0,0.35);
transition:
0.15s;
}
.main-menu-button:hover {
transform:
scale(1.035);
background:
rgba(45,45,45,0.96);
}
.main-menu-button.danger {
background:
rgba(105,22,22,0.92);
border-color:
#d56b6b;
}
.main-menu-button.danger:hover {
background:
rgba(145,28,28,0.96);
}
/* ============================================================
LADEN / NEUES SPIEL
============================================================ */
.load-game-screen {
position:
fixed;
inset:
0;
z-index:
51000;
display:
flex;
justify-content:
center;
align-items:
center;
padding:
24px;
box-sizing:
border-box;
background-image:
linear-gradient(
rgba(0,0,0,0.58),
rgba(0,0,0,0.78)
),
url("hauptmenue.png");
background-size:
cover;
background-position:
center;
backdrop-filter:
blur(5px);
}
.load-game-window {
width:
720px;
max-width:
100%;
padding:
30px;
box-sizing:
border-box;
border:
2px solid
rgba(255,255,255,0.45);
border-radius:
16px;
background:
rgba(18,18,18,0.95);
box-shadow:
0
20px
70px
rgba(0,0,0,0.8);
}
.load-game-window h1 {
margin:
0
0
7px;
text-align:
center;
font-size:
34px;
}
.load-description {
margin:
0
0
24px;
color:
#bbb;
text-align:
center;
}
.load-slots,
.save-slots {
display:
flex;
flex-direction:
column;
gap:
13px;
}
.load-slot,
.new-game-slot,
.save-slot {
width:
100%;
min-height:
88px;
padding:
17px
20px;
border:
2px solid
#555;
border-radius:
10px;
background:
#252525;
color:
white;
text-align:
left;
cursor:
pointer;
transition:
0.15s;
}
.load-slot:not(:disabled):hover,
.new-game-slot:hover,
.save-slot:hover {
background:
#363636;
border-color:
#999;
transform:
translateX(5px);
}
.load-slot:disabled {
opacity:
0.45;
cursor:
not-allowed;
}
.load-slot-title,
.slot-title {
display:
block;
margin-bottom:
8px;
font-size:
19px;
font-weight:
700;
}
.load-slot-info,
.slot-info {
display:
block;
color:
#bbb;
font-size:
14px;
}
.load-slot-row {
display:
flex;
gap:
10px;
align-items:
stretch;
}
.load-slot-row .load-slot {
flex:
1;
}
.delete-save-button {
width:
125px;
border:
2px solid
#8f3838;
border-radius:
10px;
background:
#642727;
color:
white;
font-weight:
700;
cursor:
pointer;
transition:
0.15s;
}
.delete-save-button:hover:not(:disabled) {
background:
#943636;
transform:
scale(1.025);
}
.delete-save-button:disabled {
opacity:
0.25;
cursor:
not-allowed;
}
.load-back-button {
width:
100%;
margin-top:
22px;
padding:
14px;
border:
1px solid
#666;
border-radius:
8px;
background:
#333;
color:
white;
font-size:
16px;
font-weight:
700;
cursor:
pointer;
}
.load-back-button:hover {
background:
#4b4b4b;
}
/* ============================================================
SPIELMENÜ
============================================================ */
.open-menu-button {
position:
fixed;
top:
18px;
right:
18px;
z-index:
900;
padding:
11px
18px;
border:
1px solid
#555;
border-radius:
8px;
background:
rgba(20,20,20,0.92);
color:
white;
font-size:
16px;
font-weight:
700;
cursor:
pointer;
}
.open-menu-button:hover {
background:
#3d3d3d;
}
.menu-overlay {
position:
fixed;
inset:
0;
z-index:
30000;
display:
flex;
justify-content:
center;
align-items:
center;
background:
rgba(0,0,0,0.78);
backdrop-filter:
blur(6px);
}
.menu-window {
width:
440px;
max-width:
calc(100vw - 40px);
padding:
34px;
box-sizing:
border-box;
border:
1px solid
#555;
border-radius:
15px;
background:
linear-gradient(
180deg,
#292929,
#151515
);
box-shadow:
0
20px
60px
rgba(0,0,0,0.8);
text-align:
center;
}
.menu-window h1 {
margin-top:
0;
margin-bottom:
28px;
}
.menu-button {
display:
block;
width:
100%;
margin:
11px
0;
padding:
15px;
border:
1px solid
#555;
border-radius:
8px;
background:
#333;
color:
white;
font-size:
17px;
font-weight:
700;
cursor:
pointer;
transition:
0.15s;
}
.menu-button:hover {
background:
#484848;
transform:
scale(1.015);
}
.menu-button.danger {
background:
#5c1b1b;
border-color:
#8d2929;
}
.menu-button.danger:hover {
background:
#8b2525;
}
.save-window {
width:
620px;
}
.quit-screen {
position:
fixed;
inset:
0;
z-index:
60000;
display:
flex;
flex-direction:
column;
justify-content:
center;
align-items:
center;
background:
#080808;
text-align:
center;
}
.quit-screen .menu-button {
width:
300px;
}
/* ============================================================
TOP UI
============================================================ */
.game-top-ui {
position:
fixed;
top:
14px;
left:
14px;
z-index:
850;
display:
flex;
gap:
7px;
align-items:
center;
flex-wrap:
wrap;
max-width:
calc(100vw - 130px);
}
.game-status-box {
padding:
9px
12px;
border:
1px solid
rgba(255,255,255,0.16);
border-radius:
8px;
background:
rgba(0,0,0,0.76);
color:
white;
font-size:
13px;
}
.power-status.no-power {
background:
rgba(125,25,25,0.90);
border-color:
#d85a5a;
}
.trade-main-button {
padding:
10px
15px;
border:
1px solid
#566c8c;
border-radius:
8px;
background:
#26384f;
color:
white;
font-size:
14px;
font-weight:
700;
cursor:
pointer;
}
.trade-main-button:hover {
background:
#355273;
}
.trade-main-button.sell {
border-color:
#547e5e;
background:
#24452c;
}
.trade-main-button.sell:hover {
background:
#32613e;
}
.trade-main-button.maps {
border-color:
#796b46;
background:
#50452a;
}
.trade-main-button.maps:hover {
background:
#6b5b36;
}
/* ============================================================
HANDEL / UPGRADE / KARTEN
============================================================ */
.trade-overlay,
.upgrade-overlay,
.map-overlay {
position:
fixed;
inset:
0;
z-index:
20000;
display:
flex;
justify-content:
center;
align-items:
center;
padding:
22px;
box-sizing:
border-box;
background:
rgba(0,0,0,0.82);
backdrop-filter:
blur(7px);
}
.trade-window,
.upgrade-window,
.map-window {
width:
900px;
max-width:
100%;
max-height:
90vh;
overflow:
hidden;
display:
flex;
flex-direction:
column;
border:
1px solid
#555;
border-radius:
16px;
background:
linear-gradient(
180deg,
#252525,
#131313
);
box-shadow:
0
25px
70px
rgba(0,0,0,0.82);
}
.upgrade-window {
width:
660px;
padding:
24px;
overflow-y:
auto;
}
.map-window {
width:
820px;
}
.trade-header,
.upgrade-header,
.map-header {
display:
flex;
justify-content:
space-between;
align-items:
flex-start;
gap:
20px;
padding:
22px
24px
17px;
border-bottom:
1px solid
#444;
}
.upgrade-header {
padding:
0
0
16px;
margin-bottom:
18px;
}
.trade-header h1,
.upgrade-header h1,
.map-header h1 {
margin:
0
0
6px;
font-size:
28px;
}
.trade-subtitle,
.upgrade-level,
.map-money {
color:
#bbb;
font-size:
14px;
}
.trade-close-button,
.upgrade-close-button {
width:
42px;
height:
42px;
flex:
0
0
auto;
border:
1px solid
#555;
border-radius:
8px;
background:
#333;
color:
white;
font-size:
20px;
cursor:
pointer;
}
.trade-close-button:hover,
.upgrade-close-button:hover {
background:
#702626;
}
/* ============================================================
HANDELSINHALT
============================================================ */
.trade-content {
overflow-y:
auto;
padding:
18px
24px;
display:
flex;
flex-direction:
column;
gap:
11px;
}
.trade-section-title {
margin:
12px
0
2px;
padding-bottom:
8px;
border-bottom:
1px solid
#444;
font-size:
19px;
}
.trade-empty {
padding:
16px;
border:
1px dashed
#555;
border-radius:
8px;
color:
#aaa;
text-align:
center;
}
.trade-item {
display:
flex;
justify-content:
space-between;
align-items:
center;
gap:
20px;
padding:
15px;
border:
1px solid
#444;
border-radius:
10px;
background:
#202020;
}
.trade-item:hover {
border-color:
#666;
background:
#282828;
}
.trade-item-info {
flex:
1;
min-width:
0;
}
.trade-item-name {
margin-bottom:
6px;
font-size:
18px;
font-weight:
700;
}
.trade-item-description,
.material-owned {
color:
#aaa;
font-size:
13px;
}
.recipe-mini {
margin-top:
8px;
color:
#c9c9c9;
font-size:
12px;
line-height:
1.45;
}
.trade-item-right {
display:
flex;
align-items:
center;
gap:
14px;
}
.buy-price {
min-width:
95px;
color:
#8fd68f;
font-size:
19px;
font-weight:
700;
text-align:
right;
}
.trade-buy-button,
.sell-action-button,
.map-action-button {
padding:
10px
14px;
border:
1px solid
#527860;
border-radius:
7px;
background:
#285237;
color:
white;
font-weight:
700;
cursor:
pointer;
}
.trade-buy-button:disabled,
.sell-action-button:disabled,
.map-action-button:disabled {
opacity:
0.35;
cursor:
not-allowed;
}
.trade-buy-button:hover:not(:disabled),
.sell-action-button:hover:not(:disabled),
.map-action-button:hover:not(:disabled) {
background:
#37724b;
}
/* ============================================================
VERKAUF
============================================================ */
.sell-price-area {
display:
flex;
flex-direction:
column;
align-items:
flex-end;
gap:
8px;
}
.sell-current-price {
font-size:
20px;
font-weight:
700;
}
.sell-current-price small {
color:
#999;
font-size:
11px;
font-weight:
400;
}
.price-trend {
display:
inline-block;
width:
20px;
}
.price-trend.up {
color:
#61d979;
}
.price-trend.down {
color:
#e75a5a;
}
.price-trend.same {
color:
#aaa;
}
.sell-buttons {
display:
flex;
gap:
6px;
}
.sell-action-button {
padding:
7px
10px;
border-color:
#555;
background:
#333;
font-size:
12px;
}
.sell-action-button.sell-all {
border-color:
#527860;
background:
#285237;
}
.trade-back-button,
.upgrade-back-button {
margin:
0
24px
22px;
padding:
13px;
border:
1px solid
#555;
border-radius:
8px;
background:
#303030;
color:
white;
font-size:
15px;
font-weight:
700;
cursor:
pointer;
}
.trade-back-button:hover,
.upgrade-back-button:hover {
background:
#454545;
}
.upgrade-back-button {
margin:
10px
0
0;
}
/* ============================================================
UPGRADE
============================================================ */
.upgrade-stats,
.upgrade-next-info {
padding:
16px;
border:
1px solid
#444;
border-radius:
10px;
background:
#202020;
}
.upgrade-next-info {
margin-top:
14px;
}
.upgrade-stats h3,
.upgrade-next-info h3 {
margin:
0
0
12px;
}
.upgrade-stat-row {
display:
flex;
justify-content:
space-between;
gap:
16px;
padding:
8px
0;
border-bottom:
1px solid
#353535;
}
.upgrade-stat-row:last-child {
border-bottom:
0;
}
.upgrade-next-level {
margin-bottom:
12px;
font-size:
19px;
font-weight:
700;
}
.upgrade-next-stats {
opacity:
0.92;
}
.upgrade-price {
margin-top:
13px;
padding-top:
13px;
border-top:
1px solid
#444;
font-size:
17px;
}
.upgrade-price strong {
color:
#8fd68f;
}
.upgrade-warning {
margin-top:
12px;
padding:
10px;
border:
1px solid
#8b3838;
border-radius:
8px;
background:
rgba(120,35,35,0.30);
color:
#ffb6b6;
}
.upgrade-max-level {
padding:
18px;
border:
1px solid
#837537;
border-radius:
8px;
background:
rgba(120,100,25,0.25);
color:
#ffe896;
text-align:
center;
font-weight:
700;
}
.upgrade-machine-button,
.upgrade-remove-button {
width:
100%;
margin-top:
15px;
padding:
14px;
border:
1px solid
#527860;
border-radius:
8px;
background:
#285237;
color:
white;
font-size:
16px;
font-weight:
700;
cursor:
pointer;
}
.upgrade-machine-button:hover:not(:disabled) {
background:
#39754d;
}
.upgrade-machine-button:disabled {
opacity:
0.4;
cursor:
not-allowed;
}
.upgrade-remove-button {
margin-top:
9px;
border-color:
#8b3535;
background:
#642525;
}
.upgrade-remove-button:hover {
background:
#913535;
}
/* ============================================================
KARTENMENÜ
============================================================ */
.map-list {
overflow-y:
auto;
padding:
18px
24px;
display:
flex;
flex-direction:
column;
gap:
10px;
}
.map-card {
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
18px;
padding:
16px;
border:
1px solid
#444;
border-radius:
10px;
background:
#202020;
}
.map-card.current {
border-color:
#7b714c;
background:
#2b291f;
}
.map-card-main {
min-width:
0;
}
.map-number {
color:
#aaa;
font-size:
12px;
text-transform:
uppercase;
}
.map-name {
margin:
3px
0
6px;
font-size:
19px;
font-weight:
700;
}
.map-status {
color:
#bbb;
font-size:
13px;
line-height:
1.4;
}
.map-action-button {
min-width:
150px;
}
/* ============================================================
MELDUNG
============================================================ */
.game-message {
position:
fixed;
left:
50%;
bottom:
24px;
z-index:
40000;
transform:
translateX(-50%)
translateY(20px);
padding:
11px
17px;
border:
1px solid
#555;
border-radius:
8px;
background:
rgba(10,10,10,0.94);
color:
white;
opacity:
0;
pointer-events:
none;
transition:
0.2s;
}
.game-message.show {
opacity:
1;
transform:
translateX(-50%)
translateY(0);
}
/* ============================================================
MOBILE
============================================================ */
@media
(max-width: 760px) {
.main-menu-screen {
padding-bottom:
65px;
}
.main-menu-button {
padding:
14px;
font-size:
17px;
}
.load-game-window {
padding:
20px;
}
.load-slot-row {
flex-direction:
column;
}
.delete-save-button {
width:
100%;
min-height:
44px;
padding:
10px;
}
.trade-overlay,
.upgrade-overlay,
.map-overlay {
padding:
9px;
}
.trade-item,
.map-card {
flex-direction:
column;
align-items:
stretch;
}
.trade-item-right {
justify-content:
space-between;
}
.sell-price-area {
align-items:
stretch;
}
.sell-buttons {
flex-wrap:
wrap;
}
.map-action-button {
width:
100%;
}
.game-top-ui {
max-width:
calc(100vw - 20px);
right:
10px;
}
.open-menu-button {
top:
auto;
bottom:
14px;
right:
14px;
}
.upgrade-stat-row {
flex-direction:
column;
gap:
3px;
}
}