html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#2b2b2b;color:white;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
*{box-sizing:border-box}
#game{position:fixed;inset:0;width:100vw;height:100dvh;background:#4a4740;display:block;touch-action:none}
#hud{position:fixed;left:max(8px,env(safe-area-inset-left));top:max(6px,env(safe-area-inset-top));z-index:3;text-shadow:0 1px 2px #000;font-weight:800;font-size:13px;line-height:1.35;pointer-events:auto}
#version{position:fixed;right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));z-index:3;font-weight:800;font-size:12px;color:#e7e2c8;text-shadow:0 1px 2px #000;pointer-events:none}
#miniWrap{position:fixed;right:max(8px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top));z-index:4;width:146px;height:172px;padding:4px;border:2px solid rgba(255,255,255,.75);border-radius:10px;background:rgba(0,0,0,.45);box-shadow:0 3px 12px rgba(0,0,0,.45)}
#miniTitle{height:14px;text-align:center;font-size:10px;font-weight:900;letter-spacing:.18em;color:#f0ead0;line-height:12px}#lastButton{height:16px;text-align:center;font-size:10px;font-weight:900;color:#ffe56e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:14px}
#mini{width:134px;height:124px;display:block;background:#2b2b27;border:1px solid rgba(255,255,255,.55);border-radius:6px}

button.unit{background:rgba(35,76,122,.72)}button.build{background:rgba(90,70,34,.76)}button.action{background:rgba(48,85,70,.76)}button.mode{background:rgba(64,55,104,.76)}button.danger{background:rgba(120,38,38,.78)}button.cheat{background:rgba(90,36,106,.78)}button.menu{background:rgba(92,83,40,.82)}
.remainHint{position:absolute;left:3px;top:2px;min-width:12px;height:12px;padding:0 2px;border-radius:4px;background:rgba(0,0,0,.68);color:#ffe56e;font:900 8px/12px ui-monospace,SFMono-Regular,Menlo,monospace;text-shadow:none}
#buildPanel{position:fixed;inset:0;z-index:7;display:none;align-items:flex-end;justify-content:center;padding:10px 8px max(82px,calc(env(safe-area-inset-bottom) + 76px));pointer-events:none;background:linear-gradient(transparent,rgba(0,0,0,.22))}
#buildPanel.show{display:flex}#buildPanelCard{pointer-events:auto;max-width:min(620px,96vw);padding:8px;border:1px solid rgba(255,255,255,.45);border-radius:14px;background:rgba(22,22,20,.88);box-shadow:0 6px 28px rgba(0,0,0,.55)}
#buildPanelTitle{font-size:11px;font-weight:900;letter-spacing:.16em;color:#f3e7b4;margin:0 0 5px;display:flex;justify-content:space-between;align-items:center}#buildPanelTitle button{width:30px;height:30px;font-size:14px;border-radius:9px}.buildGrid{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
#controls{position:fixed;left:max(6px,env(safe-area-inset-left));right:max(6px,env(safe-area-inset-right));bottom:max(26px,calc(env(safe-area-inset-bottom) + 18px));z-index:5;display:flex;align-items:flex-end;justify-content:center;gap:6px;flex-wrap:wrap;pointer-events:auto}
button{position:relative;width:42px;height:42px;border:1px solid rgba(255,255,255,.42);border-radius:12px;background:rgba(0,0,0,.55);color:#fff;font-size:22px;font-weight:900;box-shadow:0 2px 8px rgba(0,0,0,.35);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:active,button.on{background:rgba(255,255,255,.22);transform:translateY(1px)}
.btnIcon{display:block;width:24px;height:24px;object-fit:contain;pointer-events:none;margin:0 auto}
.hudInlineIcon{display:inline-block;width:13px;height:13px;vertical-align:-2px;object-fit:contain;margin-right:3px}
.keyHint{position:absolute;right:3px;bottom:2px;min-width:11px;height:11px;padding:0 2px;border-radius:4px;background:rgba(255,255,255,.88);color:#111;font:900 8px/11px ui-monospace,SFMono-Regular,Menlo,monospace;text-shadow:none}
#tip{position:fixed;z-index:20;display:none;max-width:min(320px,calc(100vw - 24px));padding:7px 9px;border:1px solid rgba(255,255,255,.55);border-radius:9px;background:rgba(10,10,10,.88);color:#fff;font-size:12px;line-height:1.25;box-shadow:0 4px 18px rgba(0,0,0,.45);pointer-events:none;white-space:pre-line}
#npcBox{display:none!important;height:42px;min-width:138px;padding:4px 8px;border:1px solid rgba(255,255,255,.42);border-radius:12px;background:rgba(0,0,0,.55);display:flex;align-items:center;gap:6px;font-size:12px;font-weight:900;box-shadow:0 2px 8px rgba(0,0,0,.35)}
#npcMax{width:72px;accent-color:#efe58b}
#log{position:fixed;left:max(8px,env(safe-area-inset-left));bottom:max(78px,calc(env(safe-area-inset-bottom) + 70px));z-index:4;width:min(360px,calc(100vw - 170px));max-height:70px;overflow:hidden;font-size:12px;line-height:1.25;text-shadow:0 1px 2px #000;pointer-events:none}
.logLine{padding:1px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#overlay{position:fixed;inset:0;z-index:8;background:rgba(0,0,0,.68);display:none;align-items:center;justify-content:center;text-align:center;padding:20px}
#overlay.show{display:flex}
#overlayCard{max-width:420px;border:2px solid rgba(255,255,255,.65);border-radius:18px;background:rgba(35,35,32,.92);padding:20px;box-shadow:0 5px 30px rgba(0,0,0,.55)}
#overlay h1{margin:0 0 10px;font-size:28px}#overlay p{margin:6px 0 14px}#overlay button{width:auto;min-width:110px;padding:0 14px;font-size:18px}
#settingsPanel{position:fixed;inset:0;z-index:9;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
#settingsPanel.show{display:flex}
#settingsCard{width:min(720px,96vw);max-height:92dvh;overflow:auto;border:2px solid rgba(255,255,255,.62);border-radius:18px;background:rgba(33,33,30,.96);padding:12px;box-shadow:0 6px 34px rgba(0,0,0,.62)}
#settingsCard h2{margin:0 0 8px;font-size:20px}#settingsCard p{margin:4px 0 8px;color:#eee7cc;font-size:12px}
#settingsFields{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:6px;margin:8px 0}
.settingRow{display:grid;grid-template-columns:1fr 86px;gap:5px;align-items:center;padding:4px 6px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:rgba(0,0,0,.2);font-size:11px}
.settingRow input{width:86px;border:1px solid rgba(255,255,255,.32);border-radius:7px;background:#171714;color:white;padding:5px;font-weight:800}
#settingsJson{width:100%;height:84px;border:1px solid rgba(255,255,255,.28);border-radius:10px;background:#171714;color:#f0ead0;padding:8px;font:11px ui-monospace,SFMono-Regular,Menlo,monospace;resize:vertical}
.settingsActions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.settingsActions button{width:auto;height:36px;min-width:58px;padding:0 10px;font-size:13px;border-radius:10px}


#cheatPanel{position:fixed;inset:0;z-index:10;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
#cheatPanel.show{display:flex}
#cheatCard{width:min(620px,96vw);max-height:90dvh;overflow:auto;border:2px solid rgba(255,255,255,.62);border-radius:18px;background:rgba(33,28,40,.96);padding:12px;box-shadow:0 6px 34px rgba(0,0,0,.62)}
#cheatCard h2{margin:0 0 8px;font-size:20px;color:#ffe56e}#cheatCard p{margin:4px 0 10px;color:#eee7cc;font-size:12px}
.cheatGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:7px}.cheatGrid button{width:100%;height:38px;font-size:13px;border-radius:10px;text-align:left;padding:0 9px}.cheatClose{float:right;width:34px!important;height:34px!important;text-align:center!important;padding:0!important;font-size:16px!important}

@media(max-width:520px){button{width:36px;height:36px;font-size:19px;border-radius:10px}.keyHint{font-size:7px;line-height:10px;height:10px;min-width:10px;right:2px;bottom:1px}#controls{gap:4px;bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px))}#miniWrap{width:122px;height:148px}#mini{width:110px;height:100px}#lastButton{font-size:9px}#npcBox{min-width:116px;height:36px;font-size:11px;padding:3px 6px}#npcMax{width:56px}#log{width:calc(100vw - 142px);bottom:max(66px,calc(env(safe-area-inset-bottom) + 58px))}}

#bootStatus{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:99999;padding:12px 16px;border:2px solid #ffe56e;border-radius:12px;background:rgba(0,0,0,.86);color:#ffe56e;font:900 13px system-ui;white-space:pre-line;text-align:left;box-shadow:0 6px 24px rgba(0,0,0,.55)}