body { margin: 0; background: #000; color: #fff; font-family: sans-serif; overflow: hidden; height: 100vh; display: flex; flex-direction: column; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; overscroll-behavior: none; }
button { user-select: none; -webkit-user-select: none; outline: none; }

#login-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 3000; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#login-err { color: red; margin-top: 15px; font-weight: bold; font-size: 16px; text-align: center; }

#ann { height: 20px; text-align: center; color: #0f0; background: #111; font-size: 12px; z-index: 10; }
main { flex: 1; display: flex; flex-direction: column; position: relative; touch-action: none; }
#mid-area { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; }
#coords-display { font-size: 32px; font-weight: bold; margin-bottom: 5px; text-shadow: 2px 2px 4px #000; pointer-events: none; }
#zone-display { font-size: 18px; color: #0ff; font-weight: bold; margin-bottom: 15px; pointer-events: none; }
#inventory-area { width: 90%; max-height: 250px; overflow-y: auto; background: rgba(20,20,20,0.9); text-align: center; z-index: 5; }

.side-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 70px; height: 110px; background: rgba(40,40,40,0.8); color: #fff; z-index: 1000; border: 2px solid #555; font-size: 20px; font-weight: bold; }
#l-btn { left: 0; border-radius: 0 10px 10px 0; }
#r-btn { right: 0; border-radius: 10px 0 0 10px; }

#ui-stack { width: 100%; display: flex; flex-direction: column; background: #000; border-top: 2px solid #333; z-index: 10; }
#my-info { background: #222; padding: 8px; text-align: center; font-size: 13px; border-bottom: 1px solid #444; font-weight: bold; }

#action-bar { display: flex; gap: 8px; padding: 10px; align-items: center; flex-wrap: wrap; }
#action-bar button:not(#fire-btn) { padding: 10px; background: #333; color: white; border: 1px solid #555; font-size: 12px; font-weight: bold; border-radius: 5px; }
#fire-btn { margin-left: auto; width: 80px; height: 80px; border-radius: 50%; background: red; border: 4px solid #800; font-weight: bold; font-size: 16px; color: #fff; box-shadow: 0 0 10px red; }

.bottom-tabs { display: flex; height: 65px; background: #1a1a1a; z-index: 20; border-top: 2px solid #333; }
.bottom-tabs button { flex: 1; background: none; border: none; color: #ccc; font-size: 12px; border-right: 1px solid #333; }
button.focused { border: 3px solid #0f0 !important; background-color: rgba(0, 255, 0, 0.2) !important; box-shadow: 0 0 15px #0f0; }

/* Tracking Modal Style */
#tracking-modal { display: none; position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; background: rgba(10,10,10,0.95); border: 2px solid #0f0; z-index: 2000; flex-direction: column; border-radius: 10px; }
#tracking-modal h2 { text-align: center; color: #0f0; margin-top: 10px; }
#tracking-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; padding: 10px; gap: 10px; }
#tracking-list button { padding: 15px; font-size: 16px; background: #333; color: #fff; border: 1px solid #555; border-radius: 5px; }
#tracking-list button.exit-btn { background: #800; color: #fff; margin-top: auto; border: 2px solid #f00; }