body { display: block; }
main { margin-inline: auto; width: 100%; }
.simulation-board { margin-inline: auto; height: calc(100svh - 32px); height: calc(100dvh - 32px); }
#life { margin-inline: auto; }
#placement { margin-top: 24px; padding: 18px; border: 1px solid #395147; border-radius: 12px; }
label { display: flex; flex-direction: column; gap: 8px; font-size: .9rem; }
select, input[type="number"] { width: 100%; min-width: 0; min-height: 44px; padding: 8px; border: 1px solid #577561; border-radius: 6px; background: #182a20; color: #e7f5eb; font: inherit; }
.placement-grid { display: grid; grid-template-columns: 160px 1fr; gap: 24px; align-items: center; margin-top: 20px; }
figure { margin: 0; }
figcaption { text-align: center; color: #ffbd76; margin-top: 8px; font-size: .85rem; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
.hint { color: #c1ccbf; font-size: .8rem; margin-bottom: 0; }
#placement-status:empty { display: none; }
#placement-status[data-error="true"] { color: #ffbd76; }
#macro-panel { margin-top: 24px; padding: 18px; border: 1px solid #395147; border-radius: 12px; }
#macro-panel h2 { margin-top: 0; font-size: 1.2rem; }
#macro-panel .controls { flex-wrap: wrap; }
#import-macro { max-width: 100%; }
.log-scroll { overflow: auto; max-height: 320px; margin-top: 16px; }
.log-scroll table { width: 100%; border-collapse: collapse; text-align: left; font-size: .9rem; }
.log-scroll th, .log-scroll td { padding: 10px; border-bottom: 1px solid #395147; white-space: nowrap; }
#macro-status[data-error="true"] { color: #ffbd76; }
@media (max-width: 480px) { .placement-grid { grid-template-columns: 1fr; } figure { width: 128px; margin-inline: auto; } }
@media (max-height: 400px) and (orientation: landscape) { .simulation-board { height: calc(100svh - 16px); height: calc(100dvh - 16px); } }