* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #120d10;
  font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  color: #fdf3dc;
  user-select: none; -webkit-user-select: none;
}
#stage {
  position: absolute; left: 50%; top: 50%;
  width: 1280px; height: 720px;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  overflow: hidden; background: #000;
  border-radius: 6px;
}
#game {
  position: absolute; left: 0; top: 0;
  width: 1280px; height: 720px; display: block;
  cursor: crosshair; touch-action: none;
}
.hidden { display: none !important; }

.bar {
  position: absolute; left: 0; right: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px;
}
#topbar {
  top: 0; height: 58px;
  background: linear-gradient(rgba(38, 25, 16, 0.96), rgba(38, 25, 16, 0.78));
  border-bottom: 3px solid #6b4526;
  box-shadow: 0 3px 10px rgba(0,0,0,0.35);
}
#buildbar, #testbar {
  bottom: 0; height: 86px;
  background: linear-gradient(rgba(38, 25, 16, 0.80), rgba(38, 25, 16, 0.97));
  border-top: 3px solid #6b4526;
  box-shadow: 0 -3px 10px rgba(0,0,0,0.35);
}
#lvlBox { min-width: 300px; }
#lvlName { font-size: 21px; font-weight: bold; color: #ffd66b; text-shadow: 2px 2px 0 #000; letter-spacing: 0.5px; }
#cargoName { font-size: 14px; color: #e8d7b0; }
#budgetBox { flex: 1; max-width: 420px; }
#budgetLabel { font-size: 15px; margin-bottom: 4px; }
#budgetLabel b { color: #ffd66b; }
#budgetBar { height: 12px; background: #1c130c; border: 2px solid #6b4526; border-radius: 7px; overflow: hidden; }
#budgetFill { height: 100%; width: 0%; background: linear-gradient(#ffe27a, #d9a520); transition: width 0.15s; }
#budgetFill.warn { background: linear-gradient(#ffb36b, #e0681e); }
#budgetFill.full { background: linear-gradient(#ff7b6b, #c22a1e); }
#timerBox { margin-left: auto; font-size: 16px; padding: 6px 12px; border-radius: 10px; background: rgba(0,0,0,0.25); }
#timerBox b { font-size: 22px; color: #ffd66b; font-family: "Courier New", monospace; }
#timerBox.urgent { background: rgba(200, 30, 20, 0.55); animation: pulse 0.5s infinite alternate; }
#timerBox.off { opacity: 0.45; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.07); } }

button {
  font-family: inherit; font-size: 15px; color: #fff6dd;
  background: linear-gradient(#8a5a33, #5e3a1e);
  border: 2px solid #2a180b; border-radius: 10px;
  padding: 7px 12px; cursor: pointer;
  box-shadow: 0 3px 0 #2a180b, inset 0 1px 0 rgba(255,255,255,0.25);
  text-shadow: 1px 1px 0 #000;
}
button:hover { filter: brightness(1.15); }
button:active { transform: translateY(2px); box-shadow: 0 1px 0 #2a180b; }
button.small { font-size: 13px; padding: 5px 10px; }
button.active { background: linear-gradient(#e0b04a, #a8741e); color: #fff; box-shadow: 0 3px 0 #3d2608, 0 0 12px rgba(255, 210, 90, 0.7); }
kbd {
  display: inline-block; font-family: "Courier New", monospace; font-size: 11px;
  background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px; padding: 0 4px; margin-left: 4px; vertical-align: 1px;
}

#mats { display: flex; gap: 8px; }
button.mat {
  display: grid; grid-template-columns: 22px auto; grid-template-rows: auto auto;
  column-gap: 7px; align-items: center; text-align: left;
  padding: 6px 10px; min-width: 146px; position: relative;
}
button.mat .sw { grid-row: 1 / span 2; width: 22px; height: 22px; border-radius: 5px; border: 2px solid #1a0f06; }
button.mat .mn { font-weight: bold; font-size: 15px; }
button.mat .mc { font-size: 11px; color: #f1ddb4; }
button.mat kbd { position: absolute; top: 4px; right: 6px; }
.sw-road { background: repeating-linear-gradient(90deg, #9a6532 0 6px, #7a4b22 6px 8px); }
.sw-wood { background: #d09a56; }
.sw-iron { background: radial-gradient(circle at 30% 30%, #d7dee6 0 2px, transparent 3px), #8c99a8; }
.sw-rope { background: repeating-linear-gradient(45deg, #e0c88c 0 4px, #a88b4e 4px 6px); }

#tools { display: flex; gap: 6px; margin-left: 6px; }
#tools button { padding: 7px 9px; font-size: 14px; }
#btnGo {
  margin-left: auto; font-size: 24px; font-weight: bold; padding: 10px 22px;
  background: linear-gradient(#6fd04a, #2f8a1e); border-color: #123d08;
  box-shadow: 0 4px 0 #123d08, inset 0 1px 0 rgba(255,255,255,0.35);
}
#btnGo.ready { animation: pulse 0.7s infinite alternate; }

#testInfo { font-size: 17px; flex: 1; }
#stressBox { font-size: 16px; padding: 6px 12px; background: rgba(0,0,0,0.3); border-radius: 10px; }
#stressVal { font-size: 20px; color: #9dff7a; font-family: "Courier New", monospace; }
#btnStop { font-size: 18px; padding: 9px 18px; }

#bubble {
  position: absolute; left: 198px; bottom: 104px;
  max-width: 300px; min-width: 120px;
  background: #fffbe9; color: #2a1a0c;
  border: 3px solid #2a1a0c; border-radius: 16px;
  padding: 10px 13px; font-size: 15px; line-height: 1.3;
  box-shadow: 4px 5px 0 rgba(0,0,0,0.35);
  pointer-events: none;
  animation: pop 0.18s ease-out;
}
#bubble::after {
  content: ""; position: absolute; left: -16px; bottom: 16px;
  border-width: 9px 16px 9px 0; border-style: solid;
  border-color: transparent #2a1a0c transparent transparent;
}
#bubble::before {
  content: ""; position: absolute; left: -11px; bottom: 19px; z-index: 1;
  border-width: 6px 11px 6px 0; border-style: solid;
  border-color: transparent #fffbe9 transparent transparent;
}
@keyframes pop { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

#overlay {
  position: absolute; inset: 0;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 74px;
  pointer-events: none;
}
#overlay.dim { background: rgba(10, 6, 12, 0.55); align-items: center; padding-top: 0; }
#overlay.side #panel { position: absolute; right: 14px; top: 290px; width: 440px; max-width: 440px; padding: 12px 18px 14px; }
#overlay.side #panel h1 { font-size: 38px; }
#overlay.side #panel .flavor { font-size: 16px; }
#overlay.side #panel p { margin: 6px 0; font-size: 15px; }
#overlay.side #panel .stars { font-size: 30px; }
#overlay.side #panel .row { margin-top: 10px; }
#overlay.side #panel button { font-size: 16px; padding: 8px 14px; }
#panel {
  pointer-events: auto;
  background: linear-gradient(#fff4d6, #f1dcaa);
  color: #2a1a0c;
  border: 4px solid #3b2410; border-radius: 18px;
  box-shadow: 0 8px 0 rgba(0,0,0,0.35), 0 0 40px rgba(0,0,0,0.4);
  padding: 18px 26px 20px; text-align: center;
  max-width: 640px;
  animation: pop 0.22s ease-out;
}
#panel h1 { margin: 0; font-size: 44px; line-height: 1.0; color: #b8401a; text-shadow: 3px 3px 0 #3b2410; letter-spacing: 1px; font-family: Impact, "Arial Black", "Trebuchet MS", sans-serif; }
#panel h1.win { color: #3fae22; }
#panel h2 { margin: 2px 0 10px; font-size: 20px; color: #5a3714; }
#panel p { margin: 8px 0; font-size: 16px; line-height: 1.35; }
#panel .flavor { font-size: 18px; font-style: italic; color: #4a2c12; }
#panel .stats { font-size: 15px; color: #5a3714; }
#panel .stars { font-size: 34px; color: #e3a41c; text-shadow: 2px 2px 0 #3b2410; letter-spacing: 4px; }
#panel .stars .off { color: #c9b48a; text-shadow: none; }
#panel .howto { text-align: left; font-size: 15px; margin: 10px auto; padding-left: 20px; max-width: 540px; }
#panel .howto li { margin: 4px 0; }
#panel .row { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
#panel button { font-size: 18px; padding: 9px 18px; }
#panel button.primary { background: linear-gradient(#6fd04a, #2f8a1e); border-color: #123d08; box-shadow: 0 4px 0 #123d08; font-weight: bold; }
#panel .lvlbtn { font-size: 15px; padding: 7px 12px; }
#panel .title-sub { font-size: 19px; color: #6b3a14; margin-top: 4px; font-style: italic; }
#panel .tag { display: inline-block; background: #3b2410; color: #ffd66b; border-radius: 8px; padding: 2px 8px; margin: 0 3px; font-size: 14px; }