* { box-sizing: border-box; }
body { margin: 0; background: #1d2b24; color: #fff; font-family: "Trebuchet MS", system-ui, sans-serif; min-height: 100vh; display: flex; justify-content: center; align-items: center; }
#app { width: min(100vw, 1240px); padding: 8px; }
#hud { display: flex; gap: 14px; align-items: center; background: #2d4a3a; border-radius: 10px; padding: 8px 14px; margin-bottom: 8px; font-size: 18px; }
.stat b { color: #ffd54a; margin-left: 4px; }
#msg { margin-left: auto; color: #ffb74d; font-size: 15px; }
main { display: flex; gap: 8px; align-items: flex-start; }
canvas { width: 100%; max-width: 960px; flex: 1 1 auto; border-radius: 10px; border: 3px solid #2d4a3a; cursor: crosshair; display: block; min-width: 0; }
#side { width: 250px; flex: none; background: #2d4a3a; border-radius: 10px; padding: 10px; }
#side h3 { margin: 0 0 8px; }
button { font: inherit; cursor: pointer; border: 0; border-radius: 8px; padding: 8px 10px; background: #4a7c5f; color: #fff; }
button:hover:not(:disabled) { background: #5e9a77; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.big { width: 100%; padding: 12px; font-size: 17px; background: #e08a1e; font-weight: bold; }
button.big:hover:not(:disabled) { background: #f0a030; }
#shop { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.tbtn { text-align: left; border: 2px solid transparent; font-size: 14px; line-height: 1.25; }
.tbtn small { opacity: .85; }
.tbtn .dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 5px; }
.tbtn.sel { border-color: #ffd54a; background: #5e9a77; }
#info { background: #223a2d; border-radius: 8px; padding: 8px; min-height: 130px; font-size: 14px; margin-bottom: 10px; }
#info h4 { margin: 0 0 4px; font-size: 16px; }
#info .row { display: flex; gap: 6px; margin-top: 8px; }
#info .row button { flex: 1; padding: 7px 4px; font-size: 13px; }
#controls .row { display: flex; gap: 6px; margin-top: 6px; }
#controls .row button { flex: 1; }
.screen { position: fixed; inset: 0; background: radial-gradient(#2d6a4f, #10241a); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; padding: 20px; text-align: center; z-index: 5; }
.screen h1 { font-size: clamp(30px, 6vw, 56px); margin: 0; color: #ffd54a; text-shadow: 0 3px 0 #7a4d00; }
.screen p, .screen ul { max-width: 560px; font-size: 18px; margin: 0; }
.screen ul { text-align: left; font-size: 16px; line-height: 1.5; }
.screen button { max-width: 260px; }
.hidden { display: none; }
@media (max-width: 900px) { main { flex-direction: column; } #side { width: 100%; } canvas { max-width: 100%; } }