:root{--ui-font: "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;--panel-bg: rgba(38, 28, 22, .82);--panel-border: rgba(255, 226, 186, .28);--text: #fdf3e3}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#96d0f0;font-family:var(--ui-font);color:var(--text)}#game-canvas{display:block;width:100%;height:100%;outline:none;touch-action:none}#ui-root{position:fixed;inset:0;pointer-events:none;z-index:10}.hidden{display:none!important}.loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:linear-gradient(180deg,#96d0f0,#61cb8b);pointer-events:all;transition:opacity .45s ease}.loading--done{opacity:0;pointer-events:none}.loading__title{font-size:28px;font-weight:800;letter-spacing:4px;color:#fff6e6;text-shadow:0 3px 0 rgba(120,74,48,.55)}.loading__bar{width:260px;height:10px;border-radius:999px;background:#3c281e40;overflow:hidden}.loading__fill{width:0%;height:100%;border-radius:999px;background:#f2bf99;transition:width .2s ease}.loading__text{font-size:13px;letter-spacing:1px;color:#fff6e6e6}.loading__error{max-width:560px;font-size:13px;line-height:1.7;text-align:center;color:#4a1f14;background:#ffece0e6;border-radius:10px;padding:16px 20px;white-space:pre-wrap}.hint{position:absolute;right:14px;top:62px;display:flex;flex-direction:column;gap:4px;padding:9px 14px;font-size:12px;letter-spacing:.3px;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:10px;backdrop-filter:blur(6px)}.hint b{color:#ffd9a8;font-weight:600}.hint__desktop,.hint__touch{display:flex;flex-direction:column;gap:4px}@media(hover:hover)and (pointer:fine){.hint__touch{display:none}}@media(hover:none),(pointer:coarse){.hint__desktop{display:none}}.hud__touch{position:absolute;right:max(12px,env(safe-area-inset-right));bottom:calc(118px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;pointer-events:auto;z-index:6}.touch-action{min-width:72px;min-height:44px;padding:10px 14px;font-size:15px;font-weight:700;font-family:inherit;color:#fff6e6;background:#261c16e0;border:1px solid rgba(255,214,160,.55);border-radius:12px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.touch-action--cancel{border-color:#ff96828c;color:#ffd0c6}.touch-action:active{transform:scale(.96);background:#ffc78247}.place-confirm{position:absolute;left:50%;top:50%;transform:translate(-50%);display:flex;gap:14px;align-items:center;pointer-events:auto;z-index:8}.place-confirm__btn{width:56px;height:56px;border-radius:50%;border:2px solid rgba(255,226,186,.55);font-size:26px;font-weight:800;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;box-shadow:0 6px 18px #00000047}.place-confirm__btn--ok{color:#17351f;background:#9be4a8;border-color:#c8f5d0}.place-confirm__btn--ok.is-disabled,.place-confirm__btn--ok:disabled{opacity:.4;cursor:not-allowed}.place-confirm__btn--no{color:#4a1a14;background:#f0a090;border-color:#ffd0c6}.place-confirm__btn:active:not(:disabled){transform:scale(.94)}.stats{position:absolute;left:14px;bottom:14px;padding:7px 11px;font-size:11.5px;line-height:1.6;font-variant-numeric:tabular-nums;opacity:.75;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:10px;backdrop-filter:blur(6px)}.stats span{color:#ffd9a8}.hud{position:absolute;inset:0;pointer-events:none}.hud__top{position:absolute;top:12px;left:50%;transform:translate(-50%);display:flex;align-items:stretch;gap:8px;pointer-events:auto}.hud__resources,.hud__city,.hud__speed{display:flex;align-items:center;gap:4px;padding:6px 10px;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:12px;backdrop-filter:blur(6px)}.chip{display:flex;align-items:center;gap:5px;padding:3px 8px;font-size:14px;border-radius:8px;cursor:default}.chip__value{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;color:#ffe9c9}.chip__value.is-full,.chip__value.is-warn{color:#ffb0a4}.speed{min-width:34px;padding:5px 7px;font-size:11px;color:var(--text);background:#ffecd214;border:1px solid transparent;border-radius:8px;cursor:pointer;transition:background .12s ease,border-color .12s ease}.speed:hover{background:#ffecd22e}.speed.is-active{background:#ffc78247;border-color:#ffd6a0a6}.hud__build{position:absolute;left:50%;bottom:14px;transform:translate(-50%);display:flex;align-items:flex-end;gap:10px;padding:9px 12px;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:14px;backdrop-filter:blur(6px);pointer-events:auto}.buildgroup{display:flex;flex-direction:column;gap:5px}.buildgroup+.buildgroup{padding-left:10px;border-left:1px solid rgba(255,226,186,.16)}.buildgroup__label{font-size:10.5px;letter-spacing:1.4px;color:#ffe2ba8c}.buildgroup__row{display:flex;gap:6px}.build{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:66px;padding:7px 9px;font-family:inherit;color:var(--text);background:#ffecd214;border:1px solid rgba(255,226,186,.16);border-radius:9px;cursor:pointer;transition:background .12s ease,border-color .12s ease,transform .08s ease}.build:hover{background:#ffecd22e;transform:translateY(-1px)}.build.is-active{background:#ffc7824d;border-color:#ffd6a0b3}.build--danger.is-active{background:#ff78644d;border-color:#ff9682b3}.build__name{font-size:12.5px;font-weight:600}.build__cost{font-size:10.5px;font-variant-numeric:tabular-nums;color:#ffe2bab3}.panel{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:244px;padding:16px 18px;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:14px;backdrop-filter:blur(6px);pointer-events:auto}.panel__title{margin:0;font-size:18px;font-weight:700;color:#ffe9c9}.panel__sub{margin-top:2px;font-size:11.5px;letter-spacing:.6px;color:#ffe2ba99}.panel__rows{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;margin:14px 0 0;font-size:12.5px}.panel__rows dt{color:#ffe2baa6}.panel__rows dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}.panel__desc{margin:14px 0 0;font-size:12px;line-height:1.7;color:#fff3e3b8}.panel__button{width:100%;margin-top:14px;padding:9px;font-family:inherit;font-size:12.5px;color:var(--text);background:#ffecd21a;border:1px solid rgba(255,226,186,.22);border-radius:9px;cursor:pointer}.panel__button--danger:hover:not(:disabled){background:#ff786442;border-color:#ff968299}.panel__button--upgrade{color:#fff1d4;background:#ffc78238;border-color:#ffd6a080}.panel__button--upgrade:hover:not(:disabled){background:#ffc7825c}.panel__button:disabled{opacity:.4;cursor:not-allowed}.toast{position:absolute;left:50%;bottom:132px;transform:translate(-50%);padding:9px 18px;font-size:13px;white-space:nowrap;background:#261c16eb;border:1px solid var(--panel-border);border-radius:999px;backdrop-filter:blur(6px)}.toast--warn{color:#ffd0c6;border-color:#ff968299}.floaters{position:absolute;inset:0;overflow:visible;pointer-events:none;z-index:40}.floater{position:fixed;left:0;top:0;z-index:41;transform:translate(-50%,-120%);padding:6px 12px;font-size:20px;font-weight:800;letter-spacing:.03em;line-height:1.2;white-space:nowrap;border-radius:10px;color:#f4fff0;background:#142012e0;border:2px solid rgba(190,255,170,.7);box-shadow:0 4px 14px #00000073;text-shadow:0 1px 2px rgba(0,0,0,.65);animation:floater-rise 2.4s ease-out forwards;will-change:transform,opacity}.floater--wood{color:#e7ffd8;background:#1c3012e6;border-color:#aae66ed9}.floater--stone{color:#eef2f7;background:#1c222ce6;border-color:#b4c3d7d9}.floater--food{color:#fff6d4;background:#34280ee6;border-color:#f0c86ed9}.floater--gold{color:#ffe9a8;background:#382a0ceb;border-color:#ffd26ee6}.floater--mixed{color:#fff8ec}.floater--idle{color:#ffd8c8;background:#3c1c16eb;border-color:#ff9678d9}@keyframes floater-rise{0%{opacity:0;transform:translate(-50%,-100%) scale(.85)}10%{opacity:1;transform:translate(-50%,-120%) scale(1.08)}25%{opacity:1;transform:translate(-50%,-130%) scale(1)}70%{opacity:1;transform:translate(-50%,-160%) scale(1)}to{opacity:0;transform:translate(-50%,-200%) scale(1)}}@media(max-width:720px){.hud__top{left:8px;right:8px;top:max(8px,env(safe-area-inset-top));transform:none;flex-wrap:wrap;justify-content:center;gap:6px}.hud__resources,.hud__city,.hud__speed{padding:5px 8px;border-radius:10px}.chip{padding:2px 6px;font-size:13px}.chip__value{font-size:12.5px}.hud__build{left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));transform:none;max-width:none;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:8px;padding:8px}.build{min-width:58px;padding:8px 7px}.build__name{font-size:12px}.build__cost{font-size:10px}.hint,.stats{display:none}.panel{left:8px;right:8px;top:auto;bottom:calc(108px + env(safe-area-inset-bottom));width:auto;max-height:42vh;overflow:auto}.toast{bottom:calc(108px + env(safe-area-inset-bottom));max-width:calc(100vw - 24px);white-space:normal;text-align:center}.hud__touch{bottom:calc(100px + env(safe-area-inset-bottom))}}