:root{--primary-color: #4a7c59;--secondary-color: #ffD700;--bg-dark: #1a1a1a;--bg-light: #2a2a2a;--text-primary: #ffffff;--text-secondary: #cccccc;--border-color: #444;--success-color: #4caf50;--danger-color: #f44336;--toolbar-height: 60px;--hud-height: 60px}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background-color:var(--bg-dark);color:var(--text-primary);overflow:hidden;height:100vh;height:100dvh;display:flex;flex-direction:column;touch-action:none}#app{width:100%;height:100vh;height:100dvh;display:flex;flex-direction:column;padding:0;margin:0;max-width:none;position:relative}#game-container{flex:1;height:calc(100vh - 164px);width:100%;overflow:hidden}.offline-gains-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;justify-content:center;align-items:center;z-index:1000}.offline-gains-content{background:var(--bg-light);border:2px solid var(--primary-color);border-radius:10px;padding:20px;max-width:400px;width:90%;text-align:center}.offline-gains-content h2{color:var(--secondary-color);margin-bottom:10px}.gains-section{margin:15px 0}.gains-section h4{color:var(--primary-color);margin-bottom:5px}.gain-item{color:var(--success-color);margin:5px 0;font-weight:700}.close-gains-btn{background:var(--primary-color);color:#fff;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;font-size:16px;margin-top:15px}.close-gains-btn:hover{background:#5a8c69}.action-card.active{border:2px solid var(--success-color);background:#4caf501a}.action-btn.active{background:var(--success-color);color:#fff}.action-btn.active:hover{background:#45a049}#game-hud{background:linear-gradient(135deg,#4a4a4af2,#2a2a2af2);z-index:10;position:relative;border-bottom:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.top-bar{display:flex;justify-content:space-between;align-items:center;height:50px;padding:0 15px;font-family:Segoe UI,sans-serif}.top-left .current-activity{display:flex;flex-direction:column;align-items:flex-start}.activity-label{color:#d4af37;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}.activity-time{color:#fff9;font-size:10px;margin-top:1px;font-weight:400}.top-right .game-logo{display:flex;align-items:center}.logo-svg{height:24px;width:auto;max-width:80px}.level-bar{background:linear-gradient(135deg,#3c3c3ce6,#1e1e1ee6);padding:8px 15px;border-bottom:1px solid rgba(255,255,255,.1)}.level-progress{display:flex;align-items:center;justify-content:center;gap:12px;width:100%}.level-number,.next-level{background:#ffffff1a;color:#ffffffb3;padding:4px 8px;border-radius:3px;font-weight:500;min-width:30px;text-align:center;font-size:12px;border:1px solid rgba(255,255,255,.05)}.xp-bar-container{display:flex;flex-direction:column;align-items:center;gap:2px;position:relative;flex:1;max-width:400px}.xp-bar{width:100%;height:8px;background:#0006;border-radius:4px;overflow:hidden;border:1px solid rgba(255,255,255,.1)}.xp-fill{height:100%;background:linear-gradient(90deg,#8bc34a,#4caf50);transition:width .3s ease}.xp-percentage{color:#fff;font-size:10px;font-weight:600;position:absolute;top:-1px;text-shadow:0 0 2px rgba(0,0,0,.8)}.floating-inventory-btn{position:fixed;bottom:75px;right:20px;background:none;border:none;padding:0;cursor:pointer;z-index:20;transition:transform .2s ease}.floating-inventory-btn:hover{transform:scale(1.1)}.floating-inventory-btn:active{transform:scale(.95)}.inventory-icon{width:58px;height:58px;transition:transform .2s ease}#bottom-toolbar{background:linear-gradient(135deg,#4a4a4a,#2a2a2a);height:80px;border-top:1px solid rgba(255,255,255,.1);position:fixed;bottom:0;left:0;right:0;z-index:10}.bottom-toolbar-container{display:flex;justify-content:space-around;align-items:center;height:100%;padding:0 10px}.tab-btn{background:none;border:none;color:#fff9;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 12px;border-radius:8px;cursor:pointer;transition:all .3s ease;min-width:60px}.tab-btn:hover{background:#ffffff1a;color:#ffffffe6}.tab-btn.active{background:#d4af3733;color:#d4af37}.tab-icon{width:24px;height:24px;filter:currentColor}.tab-label{font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.hud-content{background:linear-gradient(to bottom,var(--bg-light),rgba(42,42,42,.95));border-bottom:2px solid var(--border-color);height:var(--hud-height);z-index:10;position:relative}.hud-content{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;height:100%}.player-info{display:flex;align-items:center;gap:12px;flex:1}.player-level{display:flex;align-items:center;gap:4px;background:#0006;padding:6px 10px;border-radius:20px;border:1px solid var(--secondary-color)}.level-label{color:var(--secondary-color);font-size:12px;font-weight:700}#player-level{color:var(--text-primary);font-size:16px;font-weight:700}.player-xp-container{flex:1;max-width:200px}.xp-bar{height:20px;background:#00000080;border-radius:10px;overflow:hidden;position:relative}.xp-fill{height:100%;background:linear-gradient(to right,var(--primary-color),var(--secondary-color));transition:width .3s ease}.xp-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:11px;color:var(--text-primary);text-shadow:1px 1px 2px rgba(0,0,0,.8);font-weight:700}.quick-stats{display:flex;gap:8px}.stat-badge{display:flex;align-items:center;gap:4px;background:#0006;padding:6px 8px;border-radius:16px;border:1px solid var(--border-color)}.stat-badge img{width:18px;height:18px}.stat-badge span{color:var(--secondary-color);font-size:12px;font-weight:700}.active-actions-container{background:#1e1e1e;background:#1e1e1ef2;border-bottom:1px solid var(--border-color);display:none;z-index:9;position:relative;width:100%;color:var(--text-primary)}.action-bar{padding:8px 12px;animation:slideDown .3s ease;width:100%;min-height:40px}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.login-modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000}.login-modal-content{background:#0f1318;color:#e8eef3;border:1px solid #1a2027;border-radius:12px;padding:20px;width:90%;max-width:420px;box-shadow:0 10px 30px #0006;text-align:center}.login-modal-content h2{margin-top:0}.login-form{display:flex;gap:8px;margin-top:12px}.login-form input{flex:1;padding:10px;border-radius:8px;border:1px solid #27313b;background:#11151a;color:#e8eef3}.login-form button.primary{background:#5ab0ff;color:#000;border:none;border-radius:8px;padding:10px 14px}.action-bar-content{display:flex;align-items:center;gap:8px;width:100%;height:100%}.action-bar-name{color:var(--secondary-color);font-size:13px;font-weight:700;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}.action-bar-progress{flex:1;display:flex;align-items:center;gap:8px;min-width:0}.action-progress-track{flex:1;height:10px;background:#00000080;border-radius:5px;overflow:hidden;border:1px solid var(--border-color);min-width:100px;position:relative}.action-progress-fill{height:100%;background:linear-gradient(to right,var(--primary-color),var(--secondary-color));transition:width .1s linear}.action-time{font-size:12px;color:var(--text-secondary);min-width:45px;text-align:right;font-weight:600}.action-cancel-btn{background:#f4433633;border:1px solid var(--danger-color);color:var(--danger-color);font-size:16px;cursor:pointer;padding:0;width:24px;height:24px;border-radius:12px;display:flex;align-items:center;justify-content:center;transition:all .2s}.action-cancel-btn:hover{background:var(--danger-color);color:#fff}.action-cancel-btn:active{transform:scale(.9)}#game-container{flex:1;position:relative;background:var(--bg-dark);touch-action:manipulation}#game-container canvas{display:block;width:100%!important;height:100%!important}#bottom-toolbar{position:fixed;bottom:0;left:0;right:0;height:var(--toolbar-height);background:linear-gradient(to top,var(--bg-light),rgba(42,42,42,.95));border-top:2px solid var(--border-color);z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.toolbar-container{display:flex;justify-content:space-around;align-items:center;height:100%;padding:0 20px;max-width:600px;margin:0 auto}.toolbar-btn{background:none;border:none;color:var(--text-secondary);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 16px;cursor:pointer;transition:all .2s ease;position:relative;min-width:60px;height:100%}.toolbar-btn:active{transform:scale(.95)}.toolbar-btn.active{color:var(--secondary-color)}.toolbar-icon{width:24px;height:24px}.toolbar-label{font-size:11px;font-weight:600}.notification-badge{position:absolute;top:8px;right:8px;background:var(--danger-color);color:#fff;font-size:10px;font-weight:700;padding:2px 4px;border-radius:10px;min-width:16px;text-align:center}.inventory-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000e6;display:flex;align-items:flex-end;justify-content:center;z-index:200;animation:fadeIn .3s ease}.inventory-modal-content{background:var(--bg-light);border-radius:20px 20px 0 0;padding:20px;width:100%;max-width:600px;height:85vh;max-height:85vh;overflow-y:auto;display:flex;flex-direction:column;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.inventory-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid var(--border-color)}.inventory-header h2{color:var(--secondary-color);font-size:20px}.inventory-stats{display:flex;gap:20px;margin-bottom:15px;padding:10px;background:#0000004d;border-radius:8px}.stat-row{display:flex;justify-content:space-between;flex:1;font-size:12px}.stat-row span:first-child{color:var(--text-secondary)}.stat-row span:last-child{color:var(--secondary-color);font-weight:700}.inventory-tabs{display:flex;gap:8px;margin-bottom:15px;overflow-x:auto;padding-bottom:5px}.tab-btn{padding:8px 16px;background:#0000004d;border:1px solid var(--border-color);border-radius:20px;color:var(--text-secondary);font-size:12px;cursor:pointer;white-space:nowrap;transition:all .2s}.tab-btn.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.inventory-grid-container{flex:1;overflow-y:auto}.inventory-modal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:8px;padding:10px 0}.store-item-caption{font-size:12px;text-align:center;margin-top:4px;color:var(--text-secondary)}.store-buy{margin-top:6px}.inventory-slot{aspect-ratio:1;background:#0006;border:2px solid var(--border-color);border-radius:8px;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;transition:all .2s}.inventory-slot.empty{opacity:.3}.inventory-slot.filled:active{transform:scale(.95)}.inventory-slot.filled:hover{border-color:var(--secondary-color);transform:scale(1.05)}.inventory-slot img{width:70%;height:70%;object-fit:contain}.item-details{background:#00000080;border-radius:12px;padding:15px;margin-top:10px;border:1px solid var(--border-color)}.item-details.hidden{display:none}.item-details-content{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}#item-detail-icon{width:60px;height:60px;object-fit:contain}#item-detail-name{color:var(--secondary-color);font-size:16px;margin:0}#item-detail-quantity,#item-detail-value{color:var(--text-secondary);font-size:12px;margin:0}#item-detail-description{color:var(--text-secondary);font-size:11px;line-height:1.4;margin:0}.city-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000e6;display:flex;align-items:flex-end;justify-content:center;z-index:150;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.city-modal-content{background:var(--bg-light);border-radius:20px 20px 0 0;padding:20px;width:100%;max-width:600px;max-height:80vh;overflow-y:auto;border:2px solid var(--border-color);animation:slideUp .3s ease}.city-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid var(--border-color)}.city-header h2{color:var(--secondary-color);font-size:20px}.close-btn{background:none;border:none;color:var(--text-secondary);font-size:28px;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center}.close-btn:hover{color:var(--text-primary)}.city-description{color:var(--text-secondary);margin-bottom:20px;font-size:13px;line-height:1.5}.city-actions h3{color:var(--secondary-color);margin-bottom:15px;font-size:16px}.skills-tabs{display:flex;gap:8px;margin-bottom:15px;overflow-x:auto;padding-bottom:5px}.skill-tab{padding:8px 16px;background:#0000004d;border:1px solid var(--border-color);border-radius:20px;color:var(--text-secondary);font-size:12px;cursor:pointer;white-space:nowrap;transition:all .2s}.skill-tab:active{transform:scale(.95)}.skill-tab.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.actions-container{max-height:50vh;overflow-y:auto}.action-section{margin-bottom:20px}.action-section h4{color:var(--text-secondary);font-size:14px;margin-bottom:10px;padding-bottom:5px;border-bottom:1px solid var(--border-color)}.actions-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}.no-actions{text-align:center;color:var(--text-secondary);padding:20px;font-style:italic}.action-card{background:#0006;border:2px solid var(--border-color);border-radius:12px;padding:12px;transition:all .3s ease}.action-card:active:not(.disabled){transform:scale(.95)}.action-card.disabled{opacity:.5;cursor:not-allowed}.action-name{color:var(--secondary-color);font-weight:700;margin-bottom:5px;font-size:13px}.action-skill{color:var(--text-secondary);font-size:11px;text-transform:capitalize;margin-bottom:5px}.action-duration{color:var(--primary-color);font-size:11px;margin-bottom:8px}.action-requirement{color:var(--danger-color);font-size:10px;margin-bottom:4px}.action-requirement.unmet{color:#ffb4b4}.action-hint{margin-top:6px;font-size:11px;color:var(--text-secondary)}.city-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%);background:#000000d9;color:#fff;padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.15);opacity:0;pointer-events:none;transition:opacity .16s ease;z-index:9999}.city-toast.visible{opacity:1}.action-rewards{display:flex;gap:8px;margin:8px 0;font-size:11px}.reward-xp{color:var(--secondary-color);font-weight:700}.reward-items{color:var(--success-color)}.action-btn{width:100%;padding:8px;background:var(--primary-color);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:12px;font-weight:700;transition:background .2s}.action-btn:active:not(:disabled){transform:scale(.95)}.action-btn:disabled{background:#333;cursor:not-allowed;opacity:.5}.debug-panel{position:fixed;top:0;right:0;width:100%;max-width:350px;height:100vh;height:100dvh;background:var(--bg-light);border-left:2px solid var(--border-color);overflow-y:auto;z-index:1000;transform:translate(0);transition:transform .3s ease}.debug-panel.hidden{transform:translate(100%)}.debug-header{display:flex;justify-content:space-between;align-items:center;padding:15px;background:var(--bg-dark);border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:1}.debug-header h3{color:var(--secondary-color);font-size:16px}.debug-close{background:none;border:none;color:var(--text-secondary);font-size:24px;cursor:pointer;padding:0;width:30px;height:30px}.debug-section{padding:15px;border-bottom:1px solid var(--border-color)}.debug-section h4{color:var(--secondary-color);margin-bottom:10px;font-size:14px;text-transform:uppercase;letter-spacing:1px}.debug-controls{display:flex;flex-direction:column;gap:10px}.debug-controls button{padding:10px;background:var(--primary-color);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:12px;transition:background .2s}.debug-controls button:active{transform:scale(.95)}.debug-controls label{display:flex;align-items:center;gap:10px;font-size:12px}.debug-controls input[type=range]{flex:1}.debug-controls input[type=number]{padding:8px;background:var(--bg-dark);color:var(--text-primary);border:1px solid var(--border-color);border-radius:6px;width:80px}.debug-controls select{padding:8px;background:var(--bg-dark);color:var(--text-primary);border:1px solid var(--border-color);border-radius:6px}#debug-state-viewer{background:var(--bg-dark);padding:10px;border-radius:6px;font-size:10px;color:var(--text-secondary);max-height:300px;overflow-y:auto;font-family:Courier New,monospace;word-break:break-all}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-dark)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#555}@media (max-width: 480px){.action-bar{padding:6px 10px}.action-bar-name{font-size:12px;max-width:100px}.action-bar-content,.action-bar-progress{gap:6px}.action-progress-track{min-width:80px;height:8px}.action-time{font-size:11px;min-width:35px}.action-cancel-btn{width:20px;height:20px;font-size:14px}}@media (min-width: 768px){:root{--toolbar-height: 70px;--hud-height: 80px}#game-hud{height:var(--hud-height)}.hud-content{padding:12px 20px}.player-level{padding:8px 12px}.level-label{font-size:14px}#player-level{font-size:18px}.xp-bar{height:24px}.xp-text{font-size:12px}.stat-badge{padding:8px 12px}.stat-badge img{width:24px;height:24px}.stat-badge span{font-size:14px}.toolbar-icon{width:28px;height:28px}.toolbar-label{font-size:12px}.inventory-modal-content,.city-modal-content{border-radius:20px;margin:20px;height:auto;max-height:90vh}.inventory-modal,.city-modal{align-items:center}.inventory-modal-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:12px}}