:root{--bg:#05100d;--bg2:#0a1f19;--ink:#eaf7ef;--muted:#9fc7b4;--glow:#7bffd0;--gold:#ffcf4d;--teal:#46e6c4;--red:#ff4d5e;--shell:#2fa06a;--panel:#081a15d1;--line:#7bffd038}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{width:100%;height:100%;background:var(--bg);height:100dvh;color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none;font-family:Rajdhani,system-ui,sans-serif;overflow:hidden}#game-canvas{display:block;position:fixed;inset:0}#tf-loading{z-index:50;background:radial-gradient(circle at 50% 35%,#143a2e,#05100d 70%);place-items:center;transition:opacity .45s;display:grid;position:fixed;inset:0}#tf-loading.tf-fade-out{opacity:0}.tf-load-inner{text-align:center}.tf-load-bar{background:#7bffd01f;border-radius:99px;width:min(70vw,360px);height:8px;margin:22px auto 12px;overflow:hidden}.tf-load-bar i{transform-origin:0;background:linear-gradient(90deg, var(--shell), var(--glow));width:100%;height:100%;transition:transform .2s;display:block;transform:scaleX(0)}.tf-load-text{color:var(--muted);letter-spacing:.04em}.tf-logo{letter-spacing:.04em;color:var(--ink);text-shadow:0 0 26px #7bffd073;font-family:Cinzel,serif;font-size:clamp(40px,9vw,86px);font-weight:900;line-height:1}.tf-logo span{color:var(--glow)}#tf-ui{z-index:10;pointer-events:none;position:fixed;inset:0}.tf-hidden{display:none!important}.tf-panel{pointer-events:auto}.tf-center{height:100vh;height:100dvh;padding:max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));text-align:center;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;flex-direction:column;justify-content:safe center;align-items:center;gap:14px;display:flex;position:fixed;top:0;left:0;right:0;overflow-y:auto}.tf-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#040e0bb8}.tf-tag{color:var(--muted);letter-spacing:.06em;font-size:clamp(15px,3.4vw,20px)}.tf-h2{text-shadow:0 0 18px #7bffd059;font-family:Cinzel,serif;font-size:clamp(26px,6vw,44px)}.tf-win{color:var(--glow)}.tf-lose{color:var(--red)}.tf-sub{color:var(--muted);letter-spacing:.04em}.tf-menu-btns{flex-direction:column;gap:12px;width:min(86vw,340px);margin-top:8px;display:flex}.tf-row{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px;display:flex}.tf-btn{pointer-events:auto;letter-spacing:.04em;color:var(--ink);border:1px solid var(--line);cursor:pointer;background:linear-gradient(#1a4034e6,#0a1f19e6);border-radius:13px;padding:13px 20px;font-family:Rajdhani,sans-serif;font-size:clamp(16px,3.6vw,20px);font-weight:700;transition:transform 80ms,box-shadow .2s,background .2s}.tf-btn:hover{box-shadow:0 0 0 1px var(--glow), 0 8px 26px #0006}.tf-btn:active{transform:translateY(2px)scale(.98)}.tf-primary{background:linear-gradient(#2fa06a,#1c6c46);border-color:#7bffd080;box-shadow:0 0 24px #2fa06a73}.tf-ghost{color:var(--muted);background:0 0}.tf-small{border-radius:10px;padding:9px 14px;font-size:15px}.tf-icbtn{pointer-events:auto;border:1px solid var(--line);width:46px;height:46px;color:var(--ink);cursor:pointer;background:#0a1f19cc;border-radius:12px;font-size:20px}.tf-icbtn.tf-off{opacity:.4}.tf-corner{top:max(12px, env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right,0px));position:fixed}.tf-audio{gap:10px;margin-top:6px;display:flex}.tf-levels{scrollbar-width:thin;scrollbar-color:#7bffd066 transparent;flex-direction:column;gap:12px;width:min(92vw,440px);max-height:min(62dvh,100dvh - 210px);padding:4px 10px 4px 4px;display:flex;overflow-y:auto}.tf-levels::-webkit-scrollbar{width:8px}.tf-levels::-webkit-scrollbar-thumb{background:#7bffd059;border-radius:4px}.tf-world-head{z-index:2;letter-spacing:.04em;color:var(--glow);text-align:left;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:linear-gradient(#081a15f5,#081a15d1);border-bottom:1px solid #7bffd040;margin:6px 0 2px;padding:8px 10px;font-family:Cinzel,serif;font-size:16px;position:sticky;top:0}.tf-world-head:first-child{margin-top:0}.tf-node{pointer-events:auto;border:1px solid var(--line);color:var(--ink);cursor:pointer;text-align:left;background:linear-gradient(#1a4034d9,#0a1f19e6);border-radius:14px;align-items:center;gap:14px;padding:14px 16px;transition:transform 80ms,box-shadow .2s;display:flex}.tf-node:hover{box-shadow:0 0 0 1px var(--glow)}.tf-node:active{transform:scale(.99)}.tf-node.tf-locked{opacity:.5;cursor:not-allowed}.tf-node.tf-done{border-color:#7bffd08c}.tf-node-num{height:44px;color:var(--glow);background:#7bffd01f;border-radius:50%;flex:0 0 44px;place-items:center;font-family:Cinzel,serif;font-size:20px;display:grid}.tf-node-name{font-size:18px;font-weight:700}.tf-node-sub{color:var(--muted);font-size:14px}.tf-classes{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;width:min(92vw,520px);display:grid}.tf-class{pointer-events:auto;border:1px solid var(--line);color:var(--ink);cursor:pointer;text-align:left;background:linear-gradient(#1a4034d9,#0a1f19e6);border-radius:14px;padding:14px}.tf-class.tf-sel{border-color:var(--glow);box-shadow:0 0 22px #7bffd059}.tf-class.tf-locked{opacity:.65;cursor:default}.tf-class-name{color:var(--glow);font-family:Cinzel,serif;font-size:18px}.tf-class-desc{color:var(--muted);margin-top:4px;font-size:14px}.tf-menu-token-badge{top:max(12px, env(safe-area-inset-top));right:max(14px, env(safe-area-inset-right,0px));color:var(--gold);letter-spacing:.04em;cursor:pointer;pointer-events:auto;background:#ffcf4d1f;border:1px solid #ffcf4d59;border-radius:20px;padding:4px 10px;font-family:Rajdhani,system-ui,sans-serif;font-size:13px;text-decoration:none;transition:background .15s;position:absolute}.tf-menu-token-badge:hover{background:#ffcf4d3d}.tf-token-balance{color:var(--gold);letter-spacing:.04em;text-align:right;width:min(92vw,520px);margin-bottom:6px;font-size:13px}.tf-unlock-btn{border:1px solid var(--gold);color:var(--gold);cursor:pointer;pointer-events:auto;background:#ffcf4d1f;border-radius:8px;width:100%;margin-top:10px;padding:6px 12px;font-size:13px}.tf-unlock-btn:hover{background:#ffcf4d3d}.tf-unlock-btn:disabled{opacity:.5;cursor:not-allowed}.tf-hud{top:max(12px, env(safe-area-inset-top));pointer-events:none;position:fixed;left:0;right:0}.tf-hud-left{top:46px;left:calc(14px + env(safe-area-inset-left,0px));flex-direction:column;gap:6px;display:flex;position:absolute}.tf-hearts{letter-spacing:2px;font-size:24px}.tf-heart{color:var(--red);text-shadow:0 0 8px #ff4d5e99}.tf-heart.tf-empty{color:#ffffff2e;text-shadow:none}.tf-res{background:#081a1599;border-radius:10px;align-items:center;gap:6px;width:-moz-fit-content;width:fit-content;padding:3px 10px;font-size:17px;font-weight:700;display:flex}.tf-res.tf-big{padding:6px 14px;font-size:22px}.tf-dot{border-radius:50%;width:12px;height:12px;display:inline-block}.tf-food{background:var(--gold);box-shadow:0 0 8px var(--gold)}.tf-mat{background:var(--teal);box-shadow:0 0 8px var(--teal)}.tf-set{background:#cf9bff;box-shadow:0 0 8px #cf9bff}.tf-hud-mid{top:0;left:calc(132px + env(safe-area-inset-left,0px));right:calc(70px + env(safe-area-inset-right,0px));text-align:center;position:absolute}.tf-levelname{color:var(--glow);opacity:.85;font-family:Cinzel,serif;font-size:16px}.tf-progress{background:#7bffd024;border-radius:99px;height:7px;margin-top:6px;overflow:hidden}.tf-progress i{transform-origin:0;background:linear-gradient(90deg, var(--shell), var(--glow));width:100%;height:100%;transition:transform .18s;display:block;transform:scaleX(0)}.tf-reward{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 22px}.tf-reward-grid{flex-direction:column;gap:8px;margin-top:10px;font-size:19px;font-weight:700;display:flex}.tf-reward-grid div{justify-content:center;align-items:center;gap:8px;display:flex}.tf-colony{pointer-events:none;position:fixed;inset:0}.tf-colony-top{pointer-events:auto;top:max(12px, env(safe-area-inset-top));left:calc(116px + env(safe-area-inset-left,0px));flex-wrap:wrap;align-items:center;gap:10px;display:flex;position:fixed;right:14px}.tf-colony-actions{gap:8px;margin-left:auto;display:flex}.tf-btn.tf-defend{color:#ffd9c4;border-color:#ff8a5a}.tf-btn.tf-defend.tf-active{color:#fff;background:linear-gradient(#ff6b5e,#c4322a);border-color:#ff4d5e;box-shadow:0 0 18px #ff4d5e80}.tf-hearth{pointer-events:none;align-items:center;gap:8px;display:flex}.tf-hearth-label{color:#ff8a8a;text-transform:uppercase;letter-spacing:.06em;font-size:13px;font-weight:700}.tf-hearth-bar{border:1px solid var(--line);background:#00000073;border-radius:7px;width:160px;height:12px;overflow:hidden}.tf-hearth-bar>i{transform-origin:0;background:#46e6c4;width:100%;height:100%;transition:transform .15s;display:block}.tf-btn:disabled{opacity:.55;cursor:default;box-shadow:none}.tf-btn.tf-cant{opacity:.5}.tf-buildinfo{pointer-events:auto;left:50%;bottom:calc(176px + env(safe-area-inset-bottom));border:1px solid var(--line);z-index:30;background:linear-gradient(#14342af7,#081a15fa);border-radius:16px;width:min(340px,92vw);padding:14px 16px 16px;position:fixed;transform:translate(-50%);box-shadow:0 12px 40px #00000080}.tf-bi-close{color:var(--muted);cursor:pointer;background:0 0;border:none;font-size:18px;line-height:1;position:absolute;top:8px;right:10px}.tf-bi-close:hover{color:var(--ink)}.tf-bi-name{margin-bottom:4px;padding-right:18px;font-size:18px;font-weight:800}.tf-bi-stats{color:var(--muted);margin-bottom:10px;font-size:13px;line-height:1.35}.tf-bi-hp{align-items:center;gap:8px;margin-bottom:12px;display:flex}.tf-bi-hpbar{border:1px solid var(--line);background:#00000073;border-radius:7px;flex:1;height:12px;overflow:hidden}.tf-bi-hpbar>i{transform-origin:0;background:#46e6c4;width:100%;height:100%;transition:transform .15s;display:block}.tf-bi-hptext{color:var(--muted);white-space:nowrap;font-size:12px}.tf-bi-actions{flex-wrap:wrap;gap:8px;display:flex}.tf-bi-actions .tf-btn{flex:1;min-width:92px}.tf-build-hint{bottom:calc(150px + env(safe-area-inset-bottom));text-align:center;color:var(--muted);pointer-events:none;font-size:14px;position:fixed;left:0;right:0}.tf-buildbar{pointer-events:auto;bottom:max(12px, env(safe-area-inset-bottom));scrollbar-width:none;justify-content:flex-start;gap:10px;padding:10px 14px;display:flex;position:fixed;left:0;right:0;overflow-x:auto}.tf-buildbar::-webkit-scrollbar{display:none}.tf-buildcard{pointer-events:auto;text-align:left;border:1px solid var(--line);width:150px;color:var(--ink);cursor:pointer;background:linear-gradient(#1a4034eb,#0a1f19f2);border-radius:13px;flex:none;padding:11px 13px}.tf-buildcard.tf-active{border-color:var(--glow);box-shadow:0 0 22px #7bffd066}.tf-buildcard.tf-cant{opacity:.5}.tf-build-name{font-size:16px;font-weight:700}.tf-build-desc{color:var(--muted);margin:4px 0 8px;font-size:12.5px;line-height:1.3}.tf-build-cost{align-items:center;gap:6px;font-weight:700;display:flex}.tf-bulldoze{border-color:#ff8a5a66}.tf-touch{pointer-events:none;z-index:9;position:fixed;inset:0}.tf-touch-left{bottom:max(20px, env(safe-area-inset-bottom));gap:14px;display:flex;position:fixed;left:18px}.tf-touch-right{bottom:max(20px, env(safe-area-inset-bottom));align-items:flex-end;gap:14px;display:flex;position:fixed;right:18px}.tf-tbtn{pointer-events:auto;border:1px solid var(--line);width:68px;height:68px;color:var(--ink);cursor:pointer;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);-webkit-user-select:none;user-select:none;background:#0a1f198c;border-radius:50%;place-items:center;font-size:26px;display:grid}.tf-tbtn:active{background:#2fa06a99}.tf-tbtn-jump{background:#2fa06a66;width:84px;height:84px;font-size:30px}.tf-tbtn-shell{color:var(--glow);background:#46e6c447}.tf-toast{border:1px solid var(--glow);color:var(--glow);letter-spacing:.04em;pointer-events:none;opacity:0;z-index:40;background:#081a15eb;border-radius:12px;padding:12px 22px;font-weight:700;transition:opacity .3s,transform .3s;position:fixed;top:22%;left:50%;transform:translate(-50%)translateY(-10px)}.tf-toast.tf-toast-in{opacity:1;transform:translate(-50%)translateY(0)}.tf-banner{text-align:center;pointer-events:none;opacity:0;z-index:8;transition:opacity .5s,transform .5s;position:fixed;top:30%;left:0;right:0;transform:translateY(12px)}.tf-banner.tf-banner-in{opacity:1;transform:translateY(0)}.tf-banner-name{color:var(--ink);text-shadow:0 0 24px #7bffd080;font-family:Cinzel,serif;font-size:clamp(28px,7vw,52px)}.tf-banner-sub{color:var(--muted);margin-top:4px;font-size:clamp(14px,3.4vw,19px)}@media (hover:none){.tf-btn:hover,.tf-node:hover{box-shadow:none}}