.scrap-count{display:block;margin-top:7px;padding-top:6px;border-top:1px solid #abc1a42b;color:#f0d197;font:700 10px monospace;letter-spacing:.7px}
.build-panel{position:absolute;left:50%;bottom:120px;transform:translateX(-50%);width:290px;border:1px solid #b3d8bd66;background:#10251fee;border-radius:7px;padding:11px;pointer-events:auto;box-shadow:0 4px 20px #07171055}
.build-heading{display:flex;justify-content:space-between;gap:6px;font:8px monospace;letter-spacing:.3px;color:#c0d7c4}
.build-heading strong{font:inherit;color:#bce4d9}
#build-stock{color:#f0d197;white-space:nowrap}
.build-panel p{margin:7px 0 9px;font-size:10px;color:#d1dbcd}
.build-options{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.build-options button{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 5px;border:1px solid #a8c9b66b;border-radius:4px;background:linear-gradient(90deg,#66774c var(--build,0%),#203c32 var(--build,0%));color:#dce4cb;touch-action:none;min-height:77px;user-select:none}
.build-options button:disabled{opacity:.42;border-color:#a7b79b36}
.build-options button.building{border-color:#f3d58c;color:#fff1c7}
.build-options svg{width:18px;height:18px}
.build-options b{font:700 10px monospace}
.build-options span{font:8px monospace;white-space:nowrap}
.build-options kbd{padding:0 3px;margin-left:2px}
.touch .build-options kbd{display:none}
.building-near .pickup-hint{display:none}
.training .build-panel{border-color:#c5f478a0}
.training.building-near #training-hint{display:none}
@media(max-width:700px){
 .build-panel{left:16px;bottom:calc(218px + var(--safe-bottom));transform:none;width:min(240px,calc(100vw - 142px));padding:8px}
 .build-heading{font-size:7px;letter-spacing:0}
 .build-options{gap:5px}
 .build-options button{min-height:70px;padding:8px 3px}
 .build-options b{font-size:8px}
 .build-options span{font-size:7px}
 .build-panel p{font-size:9px;margin:6px 0 7px}
 .scrap-count{font-size:9px}
}
@media(max-height:700px) and (orientation:portrait){
 .build-panel{bottom:calc(207px + var(--safe-bottom))}
 .build-options svg{width:14px;height:14px}
 .build-options button{min-height:58px;gap:4px;padding:6px 3px}
 .build-panel p{margin:5px 0}
}
@media(max-height:500px) and (orientation:landscape){
 .build-panel{left:50%;transform:translateX(-50%);bottom:15px;width:270px;padding:7px}
 .build-options button{min-height:46px;padding:5px;gap:3px}
 .build-options svg{display:none}
 .build-panel p{margin:4px 0}
 .scrap-count{margin-top:5px;padding-top:4px;font-size:8px}
}

/* Three aligned choices, each with its purpose and material cost. */
.build-panel{width:310px;padding:14px;border-radius:12px;background:#132b25f5;box-shadow:0 10px 34px #0006}
.build-heading{font-size:9px;align-items:center}.build-heading strong{letter-spacing:1px}#build-stock{padding:5px 7px;background:#e4cb8c14;border-radius:5px}
.build-options{grid-template-columns:1fr;gap:7px}.build-options button{display:grid;grid-template-columns:27px 1fr;grid-template-rows:auto auto;gap:4px 9px;text-align:left;align-items:center;min-height:61px;padding:11px 12px;border-radius:7px}.build-options svg{grid-row:1/3;width:22px;height:22px;color:#c8e7bb}.build-options b{font-size:10px}.build-options span{font-size:9px;color:#e5ce9b}.build-options button:disabled{opacity:.5}.build-options button.building{box-shadow:inset 3px 0 #f3d58c}
@media(max-width:700px){.build-panel{width:min(244px,calc(100vw - 140px));padding:9px}.build-heading{font-size:7px}.build-options button{min-height:54px;padding:9px 7px;grid-template-columns:20px 1fr;gap:4px 6px}.build-options b{font-size:9px}.build-options span{font-size:8px}.build-options svg{width:18px;height:18px}}
@media(max-height:500px) and (orientation:landscape){.build-panel{width:500px;bottom:12px;padding:10px}.build-options{grid-template-columns:repeat(3,1fr)}.build-options button{min-height:52px;padding:7px;grid-template-columns:1fr}.build-options svg{display:none}.build-options b{font-size:9px}.build-options span{font-size:8px}}

.field-toggle,.chat-open{position:absolute;pointer-events:auto;min-height:44px;border:1px solid #a6cda9;border-radius:8px;background:#18362fed;color:#e8efd5;padding:10px;font:700 12px monospace}.field-toggle{left:16px;bottom:175px}.chat-open{right:16px;top:150px}
.placement-actions{position:absolute;pointer-events:auto;left:50%;bottom:100px;transform:translateX(-50%);width:min(92vw,420px);background:#10251ff5;padding:12px;border:1px solid #b9d4ad;border-radius:10px;text-align:center}.placement-actions p{font-size:14px;margin:0 0 8px}.placement-actions button,.chat-form button{min-height:44px;padding:8px 12px;background:#284d3c;color:#f0f3df;border:1px solid #a6cda9;border-radius:6px}.placement-actions button:disabled{opacity:.4}
.chat-form{position:absolute;z-index:80;pointer-events:auto;left:50%;top:30%;transform:translateX(-50%);width:min(90vw,400px);background:#10251ff5;padding:16px;border:1px solid #abc998;border-radius:12px}.chat-form label{display:block;font-size:14px;margin-bottom:8px}.chat-form input{box-sizing:border-box;width:100%;font-size:16px;padding:12px;margin-bottom:10px;color:#fff;background:#213f34;border:1px solid #abc998}.chat-log{position:absolute;right:16px;top:200px;max-width:min(65vw,360px);pointer-events:none;color:#f2f4e6;font-size:14px;text-shadow:0 1px 3px #000}.chat-log div{padding:5px 8px;background:#10251fd9;border-radius:5px;margin-bottom:4px;overflow-wrap:anywhere}
body:not(.training) .build-panel{bottom:230px;left:16px;transform:none;width:min(320px,85vw)}body:not(.training) .build-options{grid-template-columns:1fr 1fr}body:not(.training) .build-options button{display:flex;font-size:12px;min-height:55px}body:not(.training) .build-options svg{display:none}.training #build-grenade{display:none}
@media(max-height:500px){body:not(.training) .build-panel{bottom:90px;width:300px}.field-toggle{bottom:25px;left:150px}.placement-actions{bottom:10px;left:65%;width:310px}.chat-open{top:100px}.chat-log{top:145px}}
/* Construction instructions stay beside the action, with a clear three-step flow. */
.field-toggle{z-index:6;min-height:48px;font-size:13px;bottom:180px;box-shadow:0 3px 16px #0008}.field-toggle.build-ready{border:2px solid #d8f29c;box-shadow:0 0 0 3px #d8f29c30;background:#345039}
.build-help{position:absolute;left:250px;bottom:180px;width:44px;height:48px;border:1px solid #aacba9;border-radius:8px;pointer-events:auto;background:#19372f;color:#edf5dd;font-size:20px;z-index:6}
.build-guide{position:absolute;left:16px;bottom:238px;width:min(330px,calc(100vw - 32px));padding:12px 14px;border:1px solid #b9cc9270;border-left:3px solid #d8e7a5;border-radius:9px;background:#10241ff2;pointer-events:none;box-shadow:0 4px 15px #0005}.build-guide strong{font:700 12px monospace;color:#e2edb8}.build-guide p{font-size:14px;line-height:1.45;margin:7px 0 0;color:#eef2df}
body .build-panel{z-index:7;left:16px;bottom:238px;transform:none;width:min(330px,calc(100vw - 32px));padding:13px;background:#10241ff7}.build-heading{font-size:11px}.build-heading strong{letter-spacing:0}#build-menu-close{min-width:36px;min-height:36px;background:#244437;border:1px solid #90ad8a;color:#fff;border-radius:6px;font-size:24px}.build-panel p{font-size:14px;line-height:1.4}.build-options b{font-size:12px!important}.build-options span{font-size:11px!important}body .build-options{grid-template-columns:1fr 1fr}body .build-options button{min-height:64px;display:flex;padding:10px 6px}body .build-options svg{display:none}
.placement-actions{z-index:8;bottom:180px;pointer-events:auto;background:#10241ff7}.placement-actions strong{display:block;font:700 13px monospace;color:#ddebaf}.placement-actions p{font-size:15px;line-height:1.4;margin:8px 0}.placement-actions small{display:block;font-size:13px;color:#cfddc5;margin:0 0 10px}.placement-actions .invalid{color:#ffb3a3}#placement-confirm{background:#d7ecac;color:#172d21;font-weight:800;border:2px solid #e6f5c4}#placement-confirm:disabled{background:#304638;color:#b5c3ae;border-color:#64745f;opacity:.7}
.training.building-near #training-hint{display:block}.training #build-help{display:none}
@media(max-height:500px) and (orientation:landscape){.field-toggle{left:150px;bottom:12px}.build-help{left:385px;bottom:12px}.build-guide{left:150px;bottom:72px;width:300px}body .build-panel{left:150px;bottom:72px;width:320px;max-height:calc(100vh - 160px);overflow:auto}.placement-actions{bottom:12px;left:65%;width:320px}.placement-actions p{font-size:13px}.placement-actions small{margin-bottom:6px}}

.build-help{left:235px;bottom:188px;width:28px;height:28px;min-height:28px;padding:0;border:1px solid #a5bb9560;border-radius:50%;font:13px monospace;color:#b1c2a7;background:#17312799;box-shadow:none}.build-help:hover,.build-help:focus-visible{color:#eff7dc;border-color:#d6e8b7;outline:2px solid #abc59155}@media(max-height:500px) and (orientation:landscape){.build-help{left:375px;bottom:20px}}

/* Quick access: four illustrated slots anchored to the bottom edge. */
body .build-panel,body:not(.training) .build-panel{left:50%;bottom:calc(12px + var(--safe-bottom,0px));transform:translateX(-50%);width:380px;max-width:calc(100vw - 24px);padding:7px;background:#11251ff5;border-color:#789a7166;border-radius:15px;z-index:7}
.build-panel .build-heading,.build-panel #build-instruction,#build-menu-close{display:none}body .build-options,body:not(.training) .build-options{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}body .build-options button,body:not(.training) .build-options button{display:flex;align-items:center;justify-content:center;gap:2px;padding:4px;min-height:92px;position:relative;border-color:#8eab7c44;background:#233b2e;border-radius:9px}.build-options .equipment-art{display:block!important;width:49px!important;height:49px!important;grid-row:auto}.build-options b{font-size:11px!important}.build-options span{font-size:10px!important}.build-options kbd,.touch .build-options kbd{display:block;position:absolute;top:5px;left:6px;font:700 11px monospace;color:#d9e8ad;padding:0;background:none}.build-options button.selected{border-color:#e5d28a;background:#46523b;box-shadow:inset 0 -3px #e5d28a}
.field-toggle{left:50%;transform:translateX(-50%);bottom:calc(119px + var(--safe-bottom,0px));min-height:27px;padding:3px 11px;font:11px monospace;border:0;background:#12281ee0;border-radius:20px;box-shadow:none}.build-help{left:calc(50% + 94px);bottom:calc(118px + var(--safe-bottom,0px));width:26px;height:26px}.build-guide{left:50%;transform:translateX(-50%);bottom:155px;width:min(370px,90vw)}.placement-actions{left:50%;bottom:155px;width:min(380px,90vw);padding:8px 12px;border-color:#b9cf8944;pointer-events:none}.placement-actions #placement-confirm,.placement-actions #placement-rotate,.placement-actions #placement-cancel,.placement-actions #placement-cost,.placement-actions #placement-step{display:none}.placement-actions p{font-size:13px;margin:0;line-height:1.45}.placement-actions #placement-cancel{display:inline-block;pointer-events:auto;min-height:30px;padding:3px 10px;font-size:11px;margin-top:5px}.training #build-grenade{display:flex}
@media(max-width:700px){body .build-panel,body:not(.training) .build-panel{width:280px;bottom:calc(6px + var(--safe-bottom,0px))}body .build-options button,body:not(.training) .build-options button{min-height:76px}.build-options .equipment-art{width:38px!important;height:38px!important}.build-options b{font-size:10px!important}.build-options span{font-size:9px!important}.field-toggle{bottom:100px}.build-help{bottom:99px}.placement-actions{bottom:136px}#joystick{bottom:120px!important}.dash-button{bottom:140px!important}.pet-call{bottom:235px!important}}
@media(max-height:500px) and (orientation:landscape){body .build-panel,body:not(.training) .build-panel{width:320px;bottom:7px;max-height:none;overflow:visible}.field-toggle{bottom:110px}.build-help{bottom:110px}.placement-actions{bottom:146px;width:370px}.build-guide{bottom:145px}}