*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#081012;color:#edf3f4;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}button{font:inherit;color:inherit;border:0;cursor:pointer}.app{width:100%;height:100%;position:relative}.top-hud{position:absolute;inset:0 0 auto 0;height:61px;z-index:20;display:flex;align-items:center;gap:9px;padding:7px 11px;background:linear-gradient(180deg,rgba(7,14,17,.96),rgba(7,14,17,.68));backdrop-filter:blur(10px);pointer-events:none}.top-hud>*{pointer-events:auto}.brand{display:flex;align-items:center;gap:8px;min-width:175px}.brand-mark{width:35px;height:35px;border-radius:10px;background:linear-gradient(145deg,#d9b56d,#78592c);display:grid;place-items:center;color:#171106;font-weight:950}.brand span{display:block;font-size:8px;letter-spacing:1.4px;color:#ae9f83}.brand b{display:block;font-size:12px}.resources{margin-left:auto;display:flex;gap:5px}.resources div{min-width:48px;padding:4px 5px;border:1px solid rgba(255,255,255,.08);border-radius:8px;text-align:center;background:rgba(4,10,12,.55)}.resources b{display:block;font-size:10px}.resources small{font-size:7px;color:#91a0a4}.resources i{display:inline-block;width:6px;height:6px;border-radius:50%}.coin{background:#d8b36b}.food{background:#89b46d}.wood{background:#957053}.stone{background:#939c9d}.avatar{width:34px;height:34px;border-radius:50%;background:#162328;border:1px solid rgba(255,255,255,.08);font-weight:900}.camera-tip{position:absolute;top:70px;left:50%;transform:translateX(-50%);z-index:12;background:rgba(7,14,17,.6);border:1px solid rgba(255,255,255,.08);border-radius:99px;padding:6px 10px;font-size:9px;color:#d4dddd;backdrop-filter:blur(8px);transition:opacity .6s;pointer-events:none}.camera-tip.hide{opacity:0}.mode-pill{position:absolute;top:70px;left:50%;transform:translateX(-50%);z-index:25;padding:7px 10px;border-radius:9px;background:#17150f;border:1px solid rgba(214,177,107,.35);font-size:10px;display:flex;gap:8px;align-items:center}.mode-pill.hidden{display:none}.mode-pill span{color:#9ea4a5}.mode-pill b{color:#e1c38a}.mode-pill button{background:none}.building-card{position:absolute;left:11px;bottom:72px;z-index:30;width:min(350px,calc(100% - 22px));padding:13px;border-radius:15px;background:rgba(7,15,18,.95);border:1px solid rgba(255,255,255,.09);box-shadow:0 24px 70px rgba(0,0,0,.42);backdrop-filter:blur(12px)}.building-card.hidden{display:none}.close,.panel-close{position:absolute;right:7px;top:4px;background:none;color:#96a5a9;font-size:20px}.building-card h2{font-size:18px;margin:4px 0}.building-card p{font-size:10px;color:#8c9ca1;margin:0 0 7px}.card-row{padding:7px 8px;margin-top:6px;border-radius:8px;background:#0d1a1f;font-size:10px}.cost{color:#d9bf88}.buttons{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}.primary,.secondary,.wide{padding:9px;border-radius:9px;font-size:10px;font-weight:900}.primary{background:#d8b46c;color:#191306}.secondary,.wide{background:#18342d;color:#7cc9a8}.secondary.hidden{display:none}.bottom{position:absolute;left:0;right:0;bottom:0;height:59px;z-index:24;background:rgba(8,16,19,.96);border-top:1px solid rgba(255,255,255,.08);display:grid;grid-template-columns:repeat(5,1fr);padding-bottom:env(safe-area-inset-bottom)}.bottom button{background:none;color:#798a8f;font-size:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.bottom span{font-size:18px}.bottom button.active{color:#e1c88d;background:rgba(214,177,107,.07)}.panel{position:absolute;left:50%;bottom:66px;transform:translateX(-50%);z-index:29;width:min(760px,calc(100% - 18px));max-height:54%;overflow:auto;padding:14px;border-radius:15px 15px 9px 9px;background:rgba(8,16,19,.96);border:1px solid rgba(255,255,255,.08);box-shadow:0 25px 70px rgba(0,0,0,.4);backdrop-filter:blur(18px)}.panel.hidden{display:none}.panel-page.hidden{display:none}.panel h2{margin:3px 0 10px}.panel p{color:#9cafb4;font-size:10px;line-height:1.6}.task,.build-card,.economy-row,.profile-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px;margin-top:7px;border-radius:9px;background:#0c1a1f;border:1px solid rgba(255,255,255,.06);font-size:10px}.task small,.build-card small{display:block;color:#809196;font-size:8px;margin-top:2px}.task strong{color:#7bc7a5}.build-card button,.economy-row button{padding:7px 9px;border-radius:8px;background:#17332d;color:#7bc7a5;font-size:9px;font-weight:900}.wide{width:100%;margin-top:9px}.loading{position:absolute;inset:0;z-index:100;background:#091113;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;transition:opacity .45s}.loading.hide{opacity:0;pointer-events:none}.loading b{font-size:14px}.loading small{font-size:9px;color:#7f9296}.loader{width:34px;height:34px;border:3px solid rgba(255,255,255,.12);border-top-color:#d8b46c;border-radius:50%;animation:r .9s linear infinite}@keyframes r{to{transform:rotate(360deg)}}.toast{position:fixed;left:50%;bottom:74px;transform:translateX(-50%) translateY(8px);opacity:0;transition:all .18s;background:#0d1b20;border:1px solid rgba(255,255,255,.08);padding:8px 11px;border-radius:9px;font-size:10px;z-index:110;pointer-events:none}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}@media(max-width:720px){.top-hud{height:53px;padding:6px 8px}.brand{min-width:auto}.brand-mark{width:30px;height:30px}.brand span{font-size:7px}.brand b{font-size:11px}.resources{gap:3px}.resources div{min-width:40px;padding:3px}.resources b{font-size:9px}.resources small{font-size:6px}.avatar{width:31px;height:31px}.camera-tip,.mode-pill{top:62px}}